把AI都难住的Tailwind CSS安装方法

月之领主
2,920 阅读4分钟

事情的起因是这样的，最近准备开发一个后台系统，希望能有响应式，在移动端，平板端和PC端都能有良好的显示效果。无意在刷掘金的时候看到Tailwind CSS在响应式开发的时候比较方便，不用亲自去写媒体查询那套，那说干就干。

开发框架选择

vite利用现代浏览器的 ES 模块支持，实现快速的冷启动和热更新，对前端开发体验较好，所以就用vite来开发。

cnpm create vite@latest

接下来根据 Tailwind CSS 官网给出的 Useing PostCSS 安装步骤一步步来

安装 tailwindcss

cnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

不过执行 npx tailwindcss init 的时候控制台就报错了

PS E:\vite-demo> npx tailwindcss init
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:

看了下node_module目录下.bin文件夹，发现并没有关于tailwind可执行文件，既然没有，那就手动创建 tailwind.config.js文件和postcss.config.js文件。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

然后在项目style.css文件下引入

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

最后在安装下其他的包

cnpm install

运行 npm run dev。不过又报错了。

20:45:32 [vite] Internal server error: [postcss] It looks like you're trying to use
`tailwindcss` directly as a PostCSS plugin.The PostCSS plugin has
moved to a separate package, so to continue using Tailwind CSS with PostCSS
you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

看这个错误提示说是直接使用 tailwindcss 作为 PostCSS 插件，但从某个版本开始，Tailwind CSS 的 PostCSS 插件已迁移到了单独的包 @tailwindcss/postcss 中。那就安装重新安装下 cnpm install @tailwindcss/postcss 然后修改下 postcss.config.js

// postcss.config.mjs
import postcssTailwind from '@tailwindcss/postcss'; 
import autoprefixer from 'autoprefixer'; 
export default { 
    plugins: [ postcssTailwind, autoprefixer ]
};

分析原因

这个时候能项目没有报错了，但是样式没生效。之后就不管是求助deepseek还是豆包，给的建议都是检查下上面的配置有没有错误，样式是否引入。结果还是一样，没有生效，但是凭感觉肯定和版本有关系，那打开package.json检查下。

{
  "name": "demo-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "cnpm": "^9.4.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.0.5",
    "@vitejs/plugin-vue": "^5.2.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.5",
    "vite": "^6.1.0"
  }
}

tailwindcss 版本是4.0.5。打开浏览器粘着tailwindcss，毫不犹豫的就打开了第二条搜索记录。

1739139528382.jpg 左上角赫然写着3.4.17，和package.json版本号不一致。所以我就先尝试将tailwindcss的版本号降级到3.4.17，再将配置文件修改回去，最后样式也成功生效了。不过既然有最新版本，那肯定也要尝试一下。不过下拉版本号发现并未有4.0的版本。看域名 tailwindcss.cn 好像也确实是官网，不过我还是问了下豆包，给的答案是官网地址是tailwindcss.com 好吧，打开4.0的官网，使用方式这边多了一个方式用于vite的入口

1739140141198.jpg

不过先使用useing PostCSS的方法，很简单，直接引入tailwindcss。运行项目，样式也生效了。

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

@import "tailwindcss";

twilwindcss4.0的版本提供了一个 @tailwindcss/vite 包，在vite项目中可以更方便的使用，所以只需要安装 npm install tailwindcss @tailwindcss/vite 这两个包即可，然后更新下vite.config.js,可以省去postcss.config.js和tailwind.config.js这两个文件，当然如有需要也可以在这两文件实现自己的个性化需求。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ 
    plugins: [ vue(), tailwindcss()]
})

项目成功运行起来，样式也生效了。最后看了下3.x的tailwindcss包的package.json

...
"bin": {  
    "tailwind": "lib/cli.js",  
    "tailwindcss": "lib/cli.js"  
},
...

所以在安装3.x的版本时，会在node_module目录下.bin文件夹生成tailwindcss的可执行文件，而在4.x的版本中移除了bin字段。这也是为什么上面执行npx tailwindcss init时会报错。

总结

安装包的时候还是要看清包的版本，有时候最新的包的配置方式不一定适用于当下，网上各位大佬写的教程可能并不适用于最新版本的使用方式。就算现在最火的deepseek，当你去提问tailwindcss 4.0.5的版本在vite中使用方法，回答你的还是3.x的那一套流程。所以新手小白如果不去看官网最新的教程很有可能就卡壳很久。

avatar
文章
阅读
粉丝