在 vite 项目中添加 tailwindcss3

初始化项目

yarn create vite . --template react-ts

安装依赖包

yarn add --dev tailwindcss@3 postcss autoprefixer

初始化配置文件

npx tailwindcss init -p

上一步添加了配置 tailwind.config.js

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

添加 tailwind，Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file

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

HTML 配置如下

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