安装 – codthing

VSCode 插件

PostCSS Language Support
Tailwind CSS IntelliSense

Next.js + TailwindCSS

在 Next.js v10+ 项目中设置 Tailwind CSS

Step1. 创建项目

1
2

yarn create next-app --typescript

Step2. 安装Tailwind CSS

tailwindcss 通过 yarn 安装及其对等依赖项，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js.

1
2
3
4



yarn add --dev tailwindcss postcss autoprefixer

npx tailwindcss init -p

Step3. 配置模板路径

在文件中添加所有模板文件的路径 tailwind.config.js。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11



module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step4. 将 Tailwind 指令添加到 CSS

将 @tailwindTailwind 的每个层的指令添加到文件中。 ./styles/globals.css

1
2
3
4



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

Step5. 开始构建过程

1
2

yarn dev

Step6. 开始在项目中使用 Tailwind

开始使用 Tailwind 的实用程序类来设计内容。

1
2
3
4
5
6
7
8



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

安装

安装