不能使用顺风类

Posted 2023-03-04

【中文标题】不能使用顺风类

【英文标题】：Cannot use tailwind classes

【发布时间】：2022-01-23 20:35:23

【问题描述】：

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

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案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 文件。

【讨论】：

您是否能够按照我提到的步骤解决问题？想不通的可以参考CDN method使用tailwindcss。