不能使用顺风类

Cannot use tailwind classes(不能使用顺风类)

本文介绍了不能使用顺风类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这篇关于不能使用顺风类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:不能使用顺风类

基础教程推荐