不能使用顺风类

Question

我是 nodejs 和 tailwindcss 的新手，我按照https://tailwindcss.com/docs/installation 的官方安装文档中的安装教程进行操作。但是在完成所有步骤之后，不知何故我仍然无法使用顺风课程。是否有任何额外的步骤需要我遵循或某处有什么问题？

我已经尝试重新安装tailwindcss甚至节点，但问题仍然存在。

Answer 1

安装tailwindcss 包后，从命令行切换到您将使用tailwind 的目录。然后运行以下命令：

mkdir project_directory
cd project_directory
npx tailwindcss init

更新project_directory/目录下自动生成的tailwind.config.js文件

module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {},
   },
   plugins: [],
}

在/project_directory/src/目录下创建input.css file并添加组件声明：

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

当您使用以下命令时，/project_directory/dist/output.css 文件将在/dist/ 目录中创建：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

将此文件添加为index.html 文件中的引用：

<link href="/dist/output.css" rel="stylesheet">

项目目录结构如下：

project_directory/
   |
   |--- tailwind.config.js
   |
   |--- dist/
   |       | 
   |       |--- output.css 
   |
   |--- src/ 
           |
           |--- input.css
           |
           |--- index.html
           |
           |--- main.js

tailwindcss 命令在运行时即时监控/src/input.css 文件的变化，并自动更新/dist/output.css 文件。