Tailwind CSS
windicss
Our great sponsors
Tailwind CSS | windicss | |
---|---|---|
1011 | 10 | |
64,458 | 6,061 | |
2.7% | 2.6% | |
9.8 | 6.2 | |
4 days ago | 4 months ago | |
HTML | TypeScript | |
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.
Tailwind CSS
-
Web 3.0 frontend stacks in 2023
UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn
-
Dark mode with Shiki and Code Hike
If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:
-
[Update] Simple static website for an artist friend
Also at the start I used TailWind CSS but to remove the css build step I converted everything back to css, keeping some tailwind css in my main.css file.
-
Advice for backend dev with poor UI skills?
Ok you can take the easy way out and just use a framework like Bootstrap or Tailwind. As a matter of fact Tailwind has it's own Refactoring UI Book that you can use to learn. In my opinion, UI designers just wing it for the most part. At least there's no single method to this.
- Hello world
-
Separation of concerns slows you down
Now, a similar process has been happening with CSS. Thanks to CSS-in-JS and, more recently, utility CSS solutions like Tailwind CSS, the process of styling also moved into JS code. Combined with JSX, your entire component can now be a single file, where all elements of a component intertwine.
-
New hot trend? Locality of behavior
There is a new trend gaining traction lately which is called “Locality of Behaviour principle”. It is a great new name for an old concept - cohesion. It’s growing lately around HTMX and TailwindCSS communities, but it’s an useful concept in general.
-
Movie App Using Next.js 13, TailwindCSS & TypeScript
TailwindCSS
-
How I Won $18,000 In A Hackathon
I built the frontend using nextjs with typescript. I am personally a fan of react-query and tailwind, so I used both of them in my project.
-
The Power of Tailwind CSS: My Experience Building With It
I began by researching different approaches to installing Tailwind into my computer and going over the documentation on how to get started. Luckily Tailwind has comprehensive documentation, covering everything from installation to customization. After creating the folder structure and setting up the config according to the style guide, that’s when the challenge really began. It was difficult to read through my HTML, I couldn’t wrap my head around how bloated it was.
windicss
-
Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter ⚡
why not use Windi CSS or Tailwind css?
- Goodbye CSS Modules, Hello TailwindCSS
- Does anyone have TailwindCSS jit working in Nuxt 3?
-
Top 4 Tailwind CSS alternatives for 2021
Windi CSS, in contrast to Tachyons, is a very fresh framework. Started in the late December of 2020, it’s already gained a lot of attention and currently sits at respectable 1.5K GitHub stars.
-
Just-In-Time: The Next Generation of Tailwind CSS
No mention of Windi CSS? Didn't it inspire this?
-
Ok fine… TailwindCSS rocks!
However I decided it was time to question my own biases. I installed Tailwind Intellisense for VS Code and started up a test project with a starter that included Tailwind (actually it uses Windi, which is a Tailwind compiler). I then started making a basic site, forcing myself to use the utility classes for (most) all of the styling.
-
Introduce vue-windicss-preprocess, the best way to interact with vue and tailwindcss.
For more details, please check windicss
-
Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss.
You can check the README of windicss (https://github.com/voorjaar/windicss). Compared with postcss, it runs faster, can be built in real time and does not require plugins such as autoprefixer and purgecss to increase the complexity of configuration. And windicss extends the utilities and variants of tailwindcss. For example, you can directly use p-1.3rem or bg-hex-fff just like atomic css. And we also have a compilation mode, which can combine a line of classes into one to increase the readability of html.
What are some alternatives?
flowbite - The most popular and open-source library of Tailwind CSS components
antd - An enterprise-class UI design language and React UI library
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
vuetify - 🐉 Vue Component Framework
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
Bulma - Modern CSS framework based on Flexbox
esbuild - An extremely fast bundler for the web
unocss - The instant on-demand atomic CSS engine.
nextui - 🚀 Beautiful, fast and modern React UI library.
twind - The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.