Tailwind CSSのセットアップ — Next.js・Viteへの導入方法

npx create-next-app@latest my-app
# "Would you like to use Tailwind CSS?" → Yes

npm install tailwindcss @tailwindcss/vite

@import "tailwindcss";

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

@import "tailwindcss";

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

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

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