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、使用

相关推荐
李剑一2 分钟前
vitepress中logo打包丢失
vue.js
融化的雪10 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S21 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多22 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
我血条子呢28 分钟前
[HTML]播放wav格式音频
前端·html·音视频
CodeSheep43 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员1 小时前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc1 小时前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii661 小时前
120html
前端
.生产的驴1 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5