TailwindCSS：从零开始安装TailwindCSS

Ayou10031

已于 2025-03-23 20:14:57 修改

阅读量2k

点赞数 1

于 2021-11-25 16:03:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41091006/article/details/121539796

版权

前端框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中从零开始安装TailwindCSS，包括创建Vue工程、安装Tailwind、配置文件设置、移除未使用的样式声明，以及解决PostCSS版本错误和WebStorm中缺少Tailwind提示的问题。

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

文章目录

从零开始安装 Tailwindcss

从零开始安装 Tailwindcss

tailwindcss

创建Vue工程

vue create tailwindcss
cd tailwindcss

安装 Tailwind

# Tailwind CSS requires Node.js 12.13.0 or higher.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

npx tailwindcss init -p

阅读配置文件了解更多

配置Tailwind移出生产环境下未使用到的样式声明

  // tailwind.config.js
  module.exports = {
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

详情请查看优化生产指南

在CSS中引入Tailwind

创建./src/index.css文件

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

阅读文档添加基础样式，提取组件，和添加新的功能类自定义CSS扩展

最后，确保CSS文件被导入到./src/main.js文件中

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

常见问题

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，您应该安装 PostCSS 7 兼容性版本。

如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Webstorm没有TailwindCSS提示

必须安装 webstorm2020.3以上的版本自带 tailwindcss 插件

  # 卸载
  npm uninstall tailwindcss postcss autoprefixer
  # 安装2.1.4版本
  npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat@2.1.4 postcss@^7 autoprefixer@^9
  # 生成配置文件
  npx tailwindcss init -p

该版本下，有些功能将无法使用