---

一、​创建vue项目

步骤和简单使用TailwindCss4步骤一一致

二、​安装TailwindCss3

npm install tailwindcss@3.4.17 postcss autoprefixer -D

对应版本如下：

三、初始化TailwindCss

注意：少写 -p 的话，postcss.config.js不会生成

npx tailwindcss init -p

配置文件

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  // 配置需要扫描的文件类型--即src下的所有vue、js、ts文件
  content: ["./src/**/*.{vue,js,ts}"],
  // 自定义拓展配置
  theme: {
    // 覆盖默认配置
    colors: {
      'blue': '#3c9cff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#41B883',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    // 新增额外配置
    extend: {
      // 扩展颜色
      colors: {
        'purple-pink': '#8135f5',
        'blue-light': '#9acafc'
      },
    },
  },
  // 配置插件
  plugins: [
    // 示例：自定义按钮样式：btn-primary <button class="btn-primary">点击我</button>
    function({ addComponents }) {
      addComponents({
        '.btn-primary': {
          '@apply bg-blue text-[#fff] font-bold py-2 px-4 rounded': '',
          '&:hover': {
            '@apply bg-blue-light' : '',
          }
        }
      })
    },
  ],
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

四、引用TailwindCss

1、在css文件中引入base、compoents、utilities

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

2、在main中导入即可

import './assets/index.css'

补充：
1、若有警告提示：Unknown at rule @tailwind css(unknownAtRules)，可在根目录的.vscode\settings.json中设置"css.lint.unknownAtRules": "ignore"来消除警告
2、若警告是：Unknown at rule @tailwind postcss(unknownAtRules)，则要需要取消vs code扩展插件"PostCSS Intellisense and Highlighting"设置的勾选，然后重启vs code可消除警告

五、使用TailwindCss

<template>
  <div class="flex flex-col items-center justify-center h-screen">
    <img alt="Vue logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="font-[600] text-[2.5rem] my-3">
      <span class="text-green">vue 3</span>+ 
      <span class="text-blue">vite</span>+ 
      <span class="text-orange">typescript</span> +
      <span class="text-purple-pink">tailwindcss4</span>
    </div>
    <button class="btn-primary">点击我</button>
  </div>
</template>