esbuild
Tailwind CSS
Our great sponsors
- ONLYOFFICE ONLYOFFICE Docs — document collaboration in your environment
- InfluxDB - Access the most powerful time series database as a service
- SonarQube - Static code analysis for 29 languages.
esbuild | Tailwind CSS | |
---|---|---|
300 | 1124 | |
35,360 | 69,013 | |
- | 2.0% | |
9.7 | 9.7 | |
12 days ago | about 24 hours ago | |
Go | HTML | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
esbuild
-
[AskJS] Advantages of Rollup over other bundlers for creating libraries?
Rollup is highly configurable via plugins. It also supports a wide range of transpilation targets. However, it's written in JavaScript (well, TypeScript) so there's a ceiling on how fast it can go. esbuild and swc are orders-of-magnitude faster than Rollup.
-
JavaScript import maps are now supported cross-browser
Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:
deno run --allow-all https://deno.land/x/[email protected]/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230
-
xtsz - a TS / JS file runner with support for HTTP/S imports
Want to import a package / file conveniently from esm.sh or unpkg or directly from a GitHub repo for a one-off script (for example). To do this I created a custom ESBuild plugin to handle HTTP imports - that worked for ,js files. To support running both ESM and CJS, I use tsx.
-
Let’s create a Node CLI for generating files from templates!
esbuild – is an easy-to-configure bundler,
-
Building a modern gRPC-powered microservice using Node.js, Typescript, and Connect
As we iterate on the definition, we are going to want a better developer experience for rebuilding the package on changes. Typically, for a “library” or “utility” style package, I’d reach for either unbuild’s stub concept or use esbuild/tsup/rollup to implement a more traditional watch/rebuild, but in this case, I’m watching a proto file that lives outsides of the source, which breaks assumptions of those tools.
-
Svelte frontend vs HTMX and hyperscript
I use ESBuild (https://esbuild.github.io/) as a library for my almost pure Go toolchain, and it covers my requirements for almost 2 years now. ESBuild is the Go tool used in Vite, an incredible tool that I stopped using when I discovered that ESBuild covered all my needs.
-
Buildless workflow through import maps (featuring Lit, Shoelace and more)
As we can see, we have two external dependencies and one internal tool. In the modern way of packaging our application, we would be of course required to package this project using some bundler like ESBuild or Rollup. But with import maps, we can instead utilize CDN's to deliver our packages and completely eliminate the bundling step.
-
How are you building React applications? It's time to move on from Create React App
"Why?" you might ask. Vite is built on top of esbuild, a Go-based bundler for the web that is 10-100x faster than other bundlers such as webpack. Vite is also platform-agnostic, so you can learn the tool and use it for many applications.
-
The Technology Behind “Moyuk”: Create, Run and Share Tools with TypeScript on Your Browser
Internally, esbuild is used. Esbuild has a plugin system, and I created custom plugins to resolve import statements like npm: and https://.
-
Benchmarking the AWS SDK
The other option I want to highlight is packaging the project using something like Webpack or esbuild. JS Bundlers transpile all of your separate files and classes (along with all node_modules) into one single file, a practice originally developed to reduce package size for frontend applications. This helps improve the cold start time in Lambda, as unimported files can be pruned and the entire handler becomes one file.
Tailwind CSS
-
how to learn Computer Science at 21 with no GCSEs?
Learn about headless development. Things like Tailwind or combine React with Material UI and start building shit. Start simple. Build a page that does something really fundamental like display text.
-
Whispering - my Svelte Chrome Extension that brings speech-to-text to ChatGPT (and any website) [self-promo]
Tailwind CSS: A utility-first CSS framework.
-
Create a Responsive Nav Menu with Tailwind and Alpinejs
Tailwind is a utility-first CSS framework that allows you to quickly and easily style your websites. It provides a large library of pre-made classes that you can use to style your elements.
-
Building a message board with Next.js and AppWrite
For styling, we will use TailwindCSS. And to handle calling AppWrite from the front-end, we will use the data fetching and caching library React Query.
-
I made a free no-code ML tool
I usually use Bootstrap or TailwindCSS for making sites responsive.
-
What is the best CSS framework for Nuxt?
tailwindcss is a fairly solid choice. It's quite popular in its own right, NuxtLabs UI was just announced, and if you've got the coin, tailwindui provides some solid templates as well. It's all the same utility classes underneath, so it dovetails fairly decently.
-
How to setup a simple static website using Svelte (with login)
Usually, one of the first things I do on creating a new web app is to throw a UI library in to help style components. There are several UI libraries that can be used by Svelte, but in this case I went with daisyUI because it's a fairly popular UI library which includes tailwind. To install daisyUI, you first need to install tailwind. There's a few different ways to do this (such as this guide), but the easiest way I've found is the following command, which also adds PostCSS and AutoPrefixer:
-
How to build a phone mockup using only Tailwind CSS
The only prerequisite you need is to have Tailwind CSS installed on your project either via CDN or integrated into the build process.
- Tailwind 3.3.3 Leaks Info About The Misterious Oxide Project
-
How to build an application shell layout for Tailwind CSS
We will use the utility classes from Tailwind CSS and the interactivity and base UI components from Flowbite.
What are some alternatives?
swc - Rust-based platform for the Web
vite - Next generation frontend tooling. It's fast!
Rollup - Next-generation ES module bundler
flowbite - The most popular and open-source library of Tailwind CSS components
windicss - Next generation utility-first CSS framework.
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
antd - An enterprise-class UI design language and React UI library
unocss - The instant on-demand atomic CSS engine.
material-ui - MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
parcel - The zero configuration build tool for the web. 📦🚀
vuetify - 🐉 Vue Component Framework