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

相关推荐
vipbic14 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
qq_5103515914 小时前
vw 和 clamp()
前端·css·html
良木林14 小时前
JS中正则表达式的运用
前端·javascript·正则表达式
芭拉拉小魔仙15 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
JosieBook15 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛16 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端16 小时前
claude code 原理分析
前端
GalaxyMeteor16 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man16 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮16 小时前
最全Scss语法,赶紧收藏起来吧
前端·css