Tailwind CSS 在Html中的使用

官网地址:Installation - Tailwind CSS

前言

记录从0到1在原生HTML中通过Tailwind CLI 使用Tailwind CSS

Tailwind CLI

第一步,新建一个HTML文件夹

mkdir HTML

第二步,安装依赖tailwindcSS

npm install -D tailwindcss

Tailwind CSS 在Html中的使用_第1张图片

第三步,初始化tailwindcSS,生成tailwind.config.js

npx tailwindcss init

Tailwind CSS 在Html中的使用_第2张图片

Tailwind CSS 在Html中的使用_第3张图片

第四步,配置模版路径,新建 src 文件夹

Tailwind CSS 在Html中的使用_第4张图片

第五步,将Tailwind指令添加到CSS中

第一步,新建css文件夹,样式文件都放此目录

Tailwind CSS 在Html中的使用_第5张图片

第二步,新建一个样式入口文件,如:main.css

Tailwind CSS 在Html中的使用_第6张图片

第三步,添加Tailwind指令

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS 在Html中的使用_第7张图片

第六步,构建Tailwind CLI

【注意】这里只是举的一个例子,具体根据css 存放位置进行修改即可

npx tailwindcss -i ./css/main.css -o ./dist/main.css --watch

第七步,开始在HTML中使用Tailwind

【注意】 要注意引入路径





  
  
  



  
  • Wade Cooper

Tailwind CSS 在Html中的使用_第8张图片

至此,配置成功
 

你可能感兴趣的:(html5,css3,css)