Tailwind CSS使用

首先需要安装npm,去官网下载

第一步创建一个json文件
在这里插入图片描述
Tailwind CSS使用_第1张图片
第二步,安装一些库啊什么的
在这里插入图片描述
Tailwind CSS使用_第2张图片
第三步,创建一个空的tailwind.config.js文件
Tailwind CSS使用_第3张图片

第四步,创建文件,用于导入模块
Tailwind CSS使用_第4张图片
第五步,创建css文件,可以在任意位置,内容如下,用于替换标签
在这里插入图片描述
Tailwind CSS使用_第5张图片
第六步,进入package.json文件修改代码
Tailwind CSS使用_第6张图片
修改为
-o 表示输出到哪个文件
Tailwind CSS使用_第7张图片
完成后运行npm run build,这时候会生成public的那个css文件

第七步 创建一个index.html文件:
Tailwind CSS使用_第8张图片
注意link里的地址
先安装live-server
在这里插入图片描述

启动服务器
Tailwind CSS使用_第9张图片

备注:
若要自定义一些css样式可以先通过如下命令来创建文件–full
npx tailwind init tailwind-full.config.js --full
在这里插入图片描述
Tailwind CSS使用_第10张图片
然后在里面写
Tailwind CSS使用_第11张图片

你可能感兴趣的:(Tailwind CSS使用)