在Vue中安装TailwindCSS

最新推荐文章于 2025-04-24 17:15:18 发布

济宁、皮皮

最新推荐文章于 2025-04-24 17:15:18 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37962440/article/details/123246725

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何安装和配置TailwindCSS，包括使用npm或yarn安装，创建配置文件，设置content选项以替代purgeCSS，安装PostCSS和autoprefixer，创建PostCSS配置文件，并在项目中引入和测试TailwindCSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 Tailwind CSS

# 使用npm
$	npm install tailwindcss -D
# 使用yarn
$	yarn add tailwindcss -D

2.创建 Tailwind CSS 配置文件

$	npx tailwindcss init

3.配置tailwind.config.js

Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed the purge option to content to better reflect what it’s for: …
翻译: 由于Tailwind不再在幕后使用PurgeCSS，我们已经重新命名了净化选项内容，以更好地反映它的用途:

// /tailwind.config.js

module.exports = {
  // Tailwind CSS 3.0版本开始, 不再使用purgeCSS进行打包优化. 使用`content`配置项代替原`purge`配置项.
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: []
  // 配置前缀, 防止类名与其他UI框架冲突
  // prefix: 'tw-'
}

4.安装 PostCSS 和 autoprefixer

如果使用npm
$	npm install postcss autoprefixer -D

如果使用yarn
$	yarn add postcss autoprefixer -D


## 创建 PostCSS 配置文件

```js
// 在最外层创建 /postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: { config: require('autoprefixer') }
  }
}

5.引入TailWindCSS

在src/assets 目录下创建 tailwindcss.css

// src/assets/tailwindcss.css

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

然后在 main.js 文件中引入

// /src/main.js
import './assets/tailwindcss.css'

最后测试页面是否能正常使用`tailwindcss`

<div class="p-3 bg-green-500 text-white">Hello Tailwind CSS</div>

如果正常显示则已经配置成功