tailwindcss使用教程

简介: 【8月更文挑战第1天】

安装Tailwind

npm install -D tailwindcss
创建配置文件

npx tailwindcss init
会在项目中创建tailwind.config.js文件

在tailwind.config.js中添加代码:

/ @type {import('tailwindcss').Config} */
module.exports = {
content: [ './src/
/*.{html,vue,js}' ],
theme: {
extend: {}
},
plugins: []
}
引入Tailwind样式到项目中

在assets中创建一个tailwind.css样式文件,引入:

@tailwind base;
@tailwind components;
@tailwind utilities;
使用命令:

npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch
在main.js中引入:

import './assets/tailwind.css'
import './assets/output.css'
在package.json中加入:

"tail": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch"

重启项目即可。

相关文章
|
前端开发 JavaScript
Tailwind CSS:基础使用/vue3+ts+Tailwind
Tailwind CSS:基础使用/vue3+ts+Tailwind
1162 0
|
缓存 资源调度 区块链
Electron打包图标不显示解决方案
Electron打包图标不显示解决方案
3035 0
|
监控 Cloud Native 搜索推荐
Springboot/Springcloud整合ELK平台,(Filebeat方式)日志采集及管理(Elasticsearch+Logstash+Filebeat+Kibana)
Springboot/Springcloud整合ELK平台,(Filebeat方式)日志采集及管理(Elasticsearch+Logstash+Filebeat+Kibana)
3360 0
Springboot/Springcloud整合ELK平台,(Filebeat方式)日志采集及管理(Elasticsearch+Logstash+Filebeat+Kibana)
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1702 0
|
资源调度 JavaScript 前端开发
|
JavaScript 前端开发 编译器
10min代码快速熟悉Tsconfig.json配置文件
【8月更文挑战第16天】10min代码快速熟悉Tsconfig.json配置文件
743 2
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
1223 29
|
前端开发 JavaScript
tailwindcss保姆级教程(完整版带解析)
【8月更文挑战第2天】
1667 6
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
4290 6
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储

热门文章

最新文章

下一篇
开通oss服务