Vite and Tailwind CSS: Up and running

This is is outdated.
Follow the steps in the official Tailwind CSS guide

Vite is fast. Really really fast. So fast, in fact, that it's French for fast.

Using TailwindCSS with Vite's crazy quick hot reloading is an amazing dev experience. Sometimes it feels like it's updated before you finished typing. Woosh.

Setting it up with Tailwind CSS is also pretty straightforward. If you'd rather not, here's the code: vite-tailwindcss-starter.

Let's go through the steps.

Create and open directory: mkdir example-app && cd example-app

Install vite: yarn create vite-app .

Install tailwind goodness: yarn add tailwindcss @tailwindcss/typography @tailwindcss/ui -D

Initialise tailwind: yarn tailwind init

Create the postcss config file: touch postcss.config.js

And add

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Replace the contents of src/index.css file with:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";