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"

重启项目即可。

相关文章
|
6月前
|
前端开发 JavaScript
Sass混合器的详细使用教程
Sass混合器的详细使用教程
84 0
|
监控 前端开发 Ruby
Sass快速入门
Sass快速入门
82 0
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
4月前
|
JavaScript Shell 内存技术
npx教程
npx教程
86 0
|
4月前
|
JavaScript 安全 网络安全
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
542 0
|
6月前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
资源调度 JavaScript 应用服务中间件
VuePress介绍及使用指南
VuePress是一个基于Vue.js的静态网站生成工具,它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性,同时提供了强大的自定义和扩展性。
181 2
VuePress介绍及使用指南
|
资源调度 JavaScript
vite 教程
首先先介绍一下vite,vite这个名字起源于法语就是很快的意思。应为他是冷服务不打包 用es6 import 来引入对应 的js。其次就是使用rollup 去打包。开发中有热更新等。
356 0
vite 教程