Install Tailwind CSS

After you setup your project with vite, install and setup Tailwind css.

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind is installed in your project. Now let's configure it and add shadcn.