Tailwindcss安装及安装无效解决方案

一、Tailwindcss安装配置

1.安装固定版本

通过npm安装tailwindcss,然后创建你自己的tailwind.config.js文件

kotlin 复制代码
npm install -D tailwindcss@3.4.17
npx tailwindcss init

2. 在tailwindcss.config.js配置文件里面添加所有模板文件的路径

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

3. 将加载 Tailwindcss的指令添加到你的 CSS 文件中, src目录下建立style.css文件,把下面的代码复制到style文件中

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

4. 开启tailwindcss CLI构建流程

css 复制代码
npx tailwindcss -i ./src/style.css -o ./src/output.css --watch

5. 在main.js里面引入编译好的output.css文件

arduino 复制代码
import './output.css'

Tailwindcss安装无效解决方案

1. 安装依赖

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

这将创建一个tailwindcss.config.js文件和一个postcss.config.js文件

2. 配置tailwindcss.config.js

css 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts}'],
theme: {
extend: {},
},
plugins: [],
};

3. 配置postcs.config.js

makefile 复制代码
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

4. 配置style.css文件

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

5. 配置main.js(一定要导入style.css)

arduino 复制代码
import './style.css'
相关推荐
馨谙11 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade11 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保11 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo121512 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux12 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied12 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果12 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长13 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y13 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后13 小时前
使用 Service Worker 限制请求并发数
前端·service worker