vue使用tailwindcss

安装依赖

bash 复制代码
pnpm add -D tailwindcss postcss autoprefixer

创建配置文件tailwind.config.js

bash 复制代码
npx tailwindcss init

在配置文件content中添加所有模板文件的路径

javascript 复制代码
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

将 Tailwind 指令添加到你的 CSS

\src\style\tailwind.css中添加

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

main.js文件引用

javascript 复制代码
import '@/style/tailwind.css'

创建配置文件postcss.config.js

javascript 复制代码
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

vscode编辑器安装插件

Tailwind CSS IntelliSense

修改vscode配置文件

\.vscode\settings.json中添加

javascript 复制代码
// 用来设置是否在其他位置、注释和字符串中显示代码提示,这里都设置为 true,表示都显示
"editor.quickSuggestions": {
  "other": "on",
  "comments": "on",
  "strings": "on"
}

写代码显示效果为

参考

在VUE中使用Tailwind CSS
安装 - Tailwind CSS

相关推荐
jakeswang15 分钟前
查询条件与查询数据的ajax拼装
前端·ajax
samuel91816 分钟前
axios取消重复请求
前端·javascript·vue.js
三天不学习18 分钟前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
苹果酱056722 分钟前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿26 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧38 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快1 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point1 小时前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel1 小时前
webpack 核心编译器 十二 节
前端
好_快1 小时前
Lodash源码阅读-baseToString
前端·javascript·源码阅读