Tailwind CSS使用

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

第一步创建一个json文件
在这里插入图片描述
在这里插入图片描述
第二步,安装一些库啊什么的
在这里插入图片描述
在这里插入图片描述
第三步,创建一个空的tailwind.config.js文件
在这里插入图片描述

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

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

启动服务器
在这里插入图片描述

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值