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>
  )
}
vite tailwind get-started