Setting up Tailwind CSS in a Vite project with Yarn.

Install Tailwind CSS v3.4.17 and below with Vite and Yarn

/*
As mentioned by @samuel-jarvis this gist no longer works with Tailwind CSS v4.
But it will still work for Tailwind CSS v3.4.17 and below
*/

/* Terminal */
yarn create vite my-project
cd my-project

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

/* tailwind.config.cjs */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Terminal */
yarn dev

/* Enjoy */

Thank you

Thanks. It's nice to have everything in one place

Nice, thanks!

Thank you!

Happy to help.

Nicee, thank you!

I still come back to this

Hello @mdasifmunshe Due to the recent update to tailwind css 4. this setup can no longer work

Dear @samuel-jarvis Thank you for bringing my attention to this matter. I have already updated this gist and opening a new gist for Tailwind CSS v4.