Tailwind + Vite 配置
常见项目中 vite + tailwind 的配置步骤
01 新建vite项目
大部分项目这部分已经搞定了,可以直接从下一步开始看。
yarn create vite . --template react-ts
02 Install Tailwind CSS
安装基本的包
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
03 Configure your template paths
配置文件
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
04 Add the Tailwind directives to your CSS
添加 tailwind
到你的 css/scss 文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
05 Start using Tailwind in your project
在项目中使用 tailwind 吧
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}