高级 Tailwind

1npm init -y

这将在你的目录中创建一个带有默认选项的 package.json 文件。

在本课程中，我们将使用 Tailwind CLI，它能为我们提供一个可直接用于生产的配置环境。

第一步是通过运行以下命令安装 Tailwind：

1npm install -D tailwindcss

1npx tailwindcss init

1// /tailwind.config.js
2module.exports = {
3  content: [],
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8}

1// /tailwind.config.js
2module.exports = {
3  content: ["index.html"],
4  ...
5}

注意： 我们已在以下终端中提前安装了 nano，因此你可以使用以下命令编辑文件：

1nano filename

1/* /styles.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;

1npx tailwindcss -i styles.css -o tailwind.css

1npx tailwindcss -i styles.css -o tailwind.css -w

1// /package.json
2...
3"scripts": {
4  "dev": "npx tailwindcss -i styles.css -o tailwind.css",
5  "dev:watch": "npx tailwindcss -i styles.css -o tailwind.css -w"
6},
7...