使用TailwindCSS

Tailwind框架利用CSS原子化思想实现的，只需书写HTML代码，无需书写CSS，即可快速构建美观的网站。
优点：统一的风格，构建体积很小，具备响应式的一切，组件驱动等。

1. React+Vite配置

访问https://tailwindcss.com/docs/guides/vite#react，即可完成配置：

1.1 安装tailwindcss

npm install -D tailwindcss postcss autoprefixer

1.2 生成基础配置

从远程拉取初始配置文件：

npx tailwindcss init -p

1.3 配置tailwind.config.js

打开tailwind.config.js

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

1.4 配置index.css

修改index.css文件：

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

2. 使用TailwindCSS

function App() {
  return (
    <>
      <h2 className="text-2xl font-bold underline">Hello TailwindCSS</h2>
    </>
  )
}
export default App

运行效果：