😗Install Tailwind CSS with Next.js

https://tailwindcss.com/docs/guides/nextjs

npx create-next-app@latest my-project --typescript --eslint
cd my-project

npm install -D tailwindcss postcss autoprefixer
or yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Chú ý: Cài đặt tailwindcss v3 chúng ta chỉ định trong package.json

"tailwindcss": "^3.4.17"

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css

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

npm run dev

index.tsx

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Sử dụng v4

Usage:
  tailwindcss [options]

Options:
  -i, --input ··········· Input file
  -o, --output ·········· Output file [default: `-`]
  -w, --watch ··········· Watch for changes and rebuild as needed
  -m, --minify ·········· Optimize and minify the output
      --optimize ········ Optimize the output without minifying
      --cwd ············· The current working directory [default: `.`]
  -h, --help ············ Display usage information

Upgrade guide - Getting startedtailwindcss

app npx tailwindcss -i ./src/App.css -o ./src/output.css --watch

@import "tailwindcss";

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Một giải pháp hoàn hảo cho v4

yarn add npm-run-all --dev

"start": "react-scripts start",
"watch:tailwindcss": "npx tailwindcss -i ./src/App.css -o ./src/output.css -w",
"watch:start": "react-scripts start",
"dev": "npm-run-all --parallel watch:*",

postcss.config.js hoặc postcss.config.mjs đều được

export default {
  plugins: [
    "@tailwindcss/postcss"
  ],
};

src\App.tsx

import React from 'react';
import './output.css';
function App() {
  return (
    <div className="columns-3">
      App
    </div>
  );
}
export default App;