不能使用顺风类

沃梦达教程前端问题

2022-01-01 4

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

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

沃梦达教程

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

上一篇：尝试使用顺风css构建布局

下一篇：覆盖链式选择器上的TailWind css@Apply指令

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX