操作都是按文档安装的但是tailwindcss并没有生效哦

来源：3-3 安装 tailwindcss 到你的项目

慕丝7210068

2022-05-13

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "sass": "^1.45.0",
    "vite": "^2.9.9"
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './styles/index.scss'

createApp(App).mount('#app')

styles/index.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js}'],
  theme: {
    extend: {},
  },
  plugins: [

  ],
}

写回答

5回答

拧壶冲

2022-05-27

看看是不是因为没有postcss.config.js 文件，vue,vite的集成时需要有这个文件。大概运行命令掉了这个文件，或者没有用命令创建，手动创建的。使用这个命令试试

npx tailwindcss init -p

使用这个命令创建 tailwind.config.js，postcss.config.js 两个文件

魂魄之子

2022-05-27

你好，这个问题有解决了吗？我也遇到同样的问题了

Sunday

根据楼主的情况，这种问题应该是疏忽大意或者缓存所导致的

2022-05-27

共1条回复

慕码人5437048

2022-05-16

把vs code的自动保存设置下，否则很多文件你编辑好了，但是实际上没有保存，运行的时候还是使用的未编辑的，很容易出现不生效的情况

慕盖茨0298716

2022-06-26

可能是node版本不是最新的。升级一下node版本

下载视频

Sunday

2022-05-14

你好

如果是看你给出的代码确实是没有问题，我估计可能是项目文件存在位置的原因。如果还未解决你可以把你的代码打包发给我，我来看一下。（可以在 QQ 群中找到我。）

Sunday

慕盖茨0298716

680626061

2022-06-27

共2条回复

基于 Vue3 ，打造前台+中台通用开发提效解决方案

42 种前台常见业务模型， 15 种中台通用组件，成为前端提效高手

788 学习 · 517 问题

查看课程

相似问题

请问有没有tailwindcss的例子文档呢？

回答 1

老师，我的tailwindcss.config.js文件module和require都报错？

回答 2

tailwindcss如何实现before，after 以及hover？

回答 1

手机端下 window.open 依然有效？

回答 1

关于使用vite4安装tailwind

回答 1

打开慕课网App查看更多内容