使用TailWind CSS新建项目

date
Sep 24, 2022
slug
6
status
Published
type
Post
tags
summary
使用TailWind CSS,新建项目

安装 Tailwind CSS

tailwindcss 通过 npm 安装,并创建您的 tailwind.config.js 文件

配置模板路径

用以下配置覆盖 tailwind.config.js 文件中的配置(实现src下的html、js文件自动识别)

引入Tailwind样式定义 到CSS文件中

创建一个css文件,位置、名称随意,比如src/main.css,并且写入以下内容:

在HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> ,就可以使用 Tailwind 来设置内容样式了。
使用以下命令进行编译

添加实时编译

在 package.json 文件 scripts 段,代码块中中引入以下内容
运行npm run build ,实现自动监听页面改动,实时编译

声明

原创:乌鸦嘴

© 子涵 2021 - 2024