Setting up Tailwind CSS in a Vite app with Yarn

Install Tailwind CSS v4 with Vite and Yarn

/* 
The following gist is tested with react+typescript+swc. 
Other Framework may differ from each other at "vite.config.ts" file. 
*/


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

yarn add -D tailwindcss @tailwindcss/vite

/* vite.config.ts */
import { defineConfig } from 'vite'
import react from "@vitejs/plugin-react-swc";
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

/* src/index.css */
@import "tailwindcss";

/* Terminal */
yarn dev

/* Happy Coding */