当前位置：首页 > news >正文

TailwindCSS安装教程（PostCSS）

news 来源：原创 2025/5/26 4:37:51

#官方教程简直是一坨，自己跑ai查文章做出来的安装总结，作者开发环境为Vue2+VueCLI#

本文为TailwindCSS3.4版本安装教程

1，安装tailwindcss3.4.1

npm install -D tailwindcss@3.4.1

2, 初始化TailwindCSS配置文件

npx tailwindcss init

3，配置Tailwind配置文件，添加内容路径

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

将对应使用TailwindCSS的文件写入content。我这里将index.html放在了public文件夹中

4, 更新PostCSS配置文件（因为是PostCSS引入的方式）

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  'plugins': {
    'tailwindcss': {},
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {}
  }
}

5, 接下来我们需要创建一个Tailwind CSS入口文件，取名为tailwind.css，放置在你管理css的文件夹中

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

如果PostCSS版本不够

如果错误提示"PostCSS plugin tailwindcss requires PostCSS 8“ ，这意味着安装的Tailwind CSS需要PostCSS 8，而PostCSS版本对不上，比如我这个项目Vue CLI4.x项目使用PostCSS7。我们可以通过安装兼容性版本的Tailwind CSS解决这个问题