Tailwind CSS VS windicss

I will be using TailwindCSS and TypeScript due to personal preference, but you can use plain CSS and JavaScript if you want.

Meet Mosaic Lite – an excellent dashboard template that's responsive, built on Tailwind CSS, and fully coded in React. Whether you're diving into the world of SaaS products, administrator dashboards, or modern web apps, Mosaic Lite is your starting point.

CSS Styling: Next.js provides support for a wide range of styling options like inline CSS styling, the use of CSS modules, SASS, and other CSS frameworks like styled-components and Tailwind CSS.

Links to external resources like Tailwind CSS, Google Fonts, and React Icons are provided, offering additional references for users.

💅🏻Tailwindcss + 🌼 DaisyUI for styling

The first thing I did was to design the project's architecture. Since my goal was to learn Nuxt3 and Supabase, I wanted to make the deployment easy to manage so I can focus on learning these tools. No need to complicate the infrastructure. Hence, I used Vercel for my cloud hosting provider. I also did not want to spend some time on designing the UI, so I decided to use Tailwindcss with DaisyUI.

Tailwind CSS

Before getting started, make sure that you have both Tailwind CSS and Flowbite installed in your project so that the rendered HTML and JS will be functional.

why not use Windi CSS or Tailwind css?

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.

No mention of Windi CSS? Didn't it inspire this?

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.

For more details, please check windicss

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.