Vue 3 + Vite 项目中安装 Tailwind CSS

官网:安装 - TailwindCSS中文文档 | TailwindCSS中文网

tips:只按照官网的配置可能会导致样式不加载/加载不生效的问题

1、正确安装指令

复制代码
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 

自动生成 ​tailwind.config.js​ 和 ​postcss.config.js​ 文件

2、修改tailwind.config.js文件,postcss.config.js配置不变

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

3、创建tailwind.css文件

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

4、main.ts或者是main.js文件内添加

复制代码
import "@a/style/tailwind.css";

5、vscode安装插件Tailwind CSS IntelliSense

6、使用

相关推荐
小桥风满袖19 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花36 分钟前
i18n国际语言化配置
前端
编程贝多芬39 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort40 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio43 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript