从零开始安装 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

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