不能使用顺风类

2022-04-24 00:00:00 visual-studio-code web html tailwind-css

我是NodeJS和Tail Windcss的新手,我学习了https://tailwindcss.com/docs/installation官方安装文档中的安装教程。但在完成了所有步骤后,不知何故,我仍然不能使用顺风类。有什么额外的步骤需要我遵循吗?还是有什么地方有问题?

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


解决方案

安装tailwindcss包后,切换到您将从命令行使用顺风的目录。然后运行以下命令:

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;

使用以下命令时,将在/dist/目录下创建/project_directory/dist/output.css文件:

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文件。

相关文章