以Vite项目为例

1. 我们先安装依赖文件 生成文件

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. 配置tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. css配置

css引入 并在main中引入此文件
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 安装插件
   

tailwind不生效的问题

npx tailwindcss init -p 需要生成的两个文件
一个是tailwind.config.js文件
一个是postcss.config.js ←这个我之前执行并没给我生成
重新执行 npx tailwindcss init -p或者手动创建文件postcss.config.js即可

//postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

文件改动重新启动项目即可

还有一点它默认单位是rem 不过我们可以在tailwind.config.js自定义配置一下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {// 用于覆盖tailwindcss的默认配置
    colors: {
      white: 'var(--color-white)',
      primary: {
        DEFAULT: 'var(--el-color-primary)',
        'light-3': 'var(--el-color-primary-light-3)',
        'light-5': 'var(--el-color-primary-light-5)',
        'light-7': 'var(--el-color-primary-light-7)',
        'light-8': 'var(--el-color-primary-light-8)',
        'light-9': 'var(--el-color-primary-light-9)',
        'dark-2': 'var(--el-color-primary-dark-2)'
      },
      success: 'var(--el-color-success)',
      warning: 'var(--el-color-warning)',
      danger: 'var(--el-color-danger)',
      error: 'var(--el-color-error)',
      info: 'var(--el-color-info)',
      body: 'var(--el-bg-color)',
      page: 'var(--el-bg-color-page)',
      'tx-primary': 'var(--el-text-color-primary)',
      'tx-regular': 'var(--el-text-color-regular)',
      'tx-secondary': 'var(--el-text-color-secondary)',
      'tx-placeholder': 'var(--el-text-color-placeholder)',
      'tx-disabled': 'var(--el-text-color-disabled)',
      br: 'var(--el-border-color)',
      'br-light': 'var(--el-border-color-light)',
      'br-extra-light': 'var(--el-border-color-extra-light)',
      'br-dark': 'var( --el-border-color-dark)',
      fill: 'var(--el-fill-color)',
      'fill-light': 'var(--el-fill-color-light)',
      'fill-lighter': 'var(--el-fill-color-lighter)',
      mask: 'var(--el-mask-color)'
    },
    fontFamily: {
      sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
    },
    boxShadow: {
      DEFAULT: 'var(--el-box-shadow)',
      light: 'var(--el-box-shadow-light)',
      lighter: 'var(--el-box-shadow-lighter)',
      dark: 'var(--el-box-shadow-dark)'
    },
    fontSize: {
      xs: 'var(--el-font-size-extra-small)',
      sm: 'var( --el-font-size-small)',
      base: 'var( --el-font-size-base)',
      lg: 'var( --el-font-size-medium)',
      xl: 'var( --el-font-size-large)',
      '2xl': 'var( --el-font-size-extra-large)',
      '3xl': '20px',
      '4xl': '24px',
      '5xl': '28px',
      '6xl': '30px',
      '7xl': '36px',
      '8xl': '48px',
      '9xl': '60px'
    },
    spacing: {
      px: '1px',
      0: '0px',
      0.5: '2px',
      1: '4px',
      1.5: '6px',
      2: '8px',
      2.5: '10px',
      3: '12px',
      3.5: '14px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      20: '80px',
      24: '96px',
      28: '112px',
      32: '128px',
      36: '144px',
      40: '160px',
      44: '176px',
      48: '192px',
      52: '208px',
      56: '224px',
      60: '240px',
      64: '256px',
      72: '288px',
      80: '320px',
      96: '384px'
    },
    lineHeight: {
      none: '1',
      tight: '1.25',
      snug: '1.375',
      normal: '1.5',
      relaxed: '1.625',
      loose: '2',
      3: '12px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px'
    }
  },

  plugins: [
    // require('@tailwindcss/line-clamp') // 引入插件
  ]
}

这个转换一部分为px单位 有其他需求也可去官网查看文档自定义修改

最后官网教程
官网地址

2024/9/3更新一下

发现有时候会提示错误
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/MSI/Desktop/vite-project): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a ‘.js’ file extension and ‘C:\Users\MSI\Desktop\vite-project\package.json’ contains “type”: “module”. To treat it as a CommReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a ‘.js’ file extension and ‘C:\Users\MSI\Desktop\vite-project\package.json’ contains “type”: “module”. To treat it as a CommonJS script, rename it to use the ‘.cjs’ file extension.
at file:///C:/Users/MSI/Desktop/vite-project/postcss.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
at async importDefault (file:///C:/Users/MSI/Desktop/vite-project/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:33375:18)
at async Object.search (file:///C:/Users/MSI/Desktop/vite-project/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:25631:42)]

Node.js v18.19.0
error Command failed with exit code 1.

这个问题通常是因为 package.json 文件中设置了 “type”: “module”，这使得 .js 文件被视为 ES 模块，而 PostCSS 的配置文件是用 CommonJS 模块编写的

方案一

• 将 postcss.config.js 文件重命名为 postcss.config.cjs，使其被视为 CommonJS 模块。

• 修改 postcss.config.cjs 的内容为：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

方案二

将 postcss.config.js 文件的内容修改为 ES 模块语法

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

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