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

相关推荐
无限大.1 小时前
前端知识速记:节流与防抖
前端
十八朵郁金香1 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢1 小时前
第26节课:内容安全策略(CSP)—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元2 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠3 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS体育馆管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
还是鼠鼠6 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味6 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj7 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠7 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架