工作两年，最后从css转向tailwind了！tailwind使用不难，菜鸟只是希望这个经历可以让各位新手赶紧掌握tai

菜鸟上班已经两年了，从一个对技术充满热情的小伙子，变成了一个职场老鸟了。自以为自己在不停的学习，但是其实就是学一些零碎的知识点，比如：vue中什么东西没见过、js什么特性没用过、css新出了个啥 ……

菜鸟感觉自己也出现了惰性，就是暂时用不上的或者学习成本比较大的，就直接收藏了，想着后面再来学习；然后那些很快能接收有用的小的知识点，就感觉看过几次就收藏了，后面有用，就来收藏里面翻一下就行！

但是菜鸟最近再来回想才发现，这些其实都是虚的，程序员最重要的应该是思维模式，以及如何把学的东西、好用的东西用起来，找到应用场景，而不是到时候再去找。

正如标题所说，菜鸟其实很早就知道css原子化，但是一直都走不出自己的舒适圈，感觉就写点css也挺好，为什么还要花力气去记别人想好的类名？要是一直用这些，岂不是css知识都忘记完了？

直到我们公司的大佬来了之后，力推tailwind，而菜鸟感觉和大佬的差距真的很大，所以又激起了菜鸟想要学习的兴趣！

怎么从css过渡到tailwind

菜鸟在之前，是很不想使用tailwind的，因为菜鸟感觉里面很多类名需要去记，而且和我之前取类名的方式也不一样！相信大部分人都和菜鸟一样，在用tailwind之前，取类名一般都是和包裹的内容相关的名字，例如：contentBox、title、asideBox ……

前期使用不熟的时候直接打开官网就行：www.tailwindcss.cn/docs/instal…

菜鸟告诉大家一个办法，就是别想着去记类名，直接你想要用什么css属性，直接点击搜索即可，敲入你想使用的属性

多用几次，自然就记住了，而且现在编译器有提示的。用了tailwind之后，只能说句真香，因为再也不会有怎么取名以及有重名的困扰了！

tailwind yyds

一开始菜鸟用tailwind，感觉也不是很自由啊！

菜鸟就感觉这个也太low了吧，我要是想用别的值怎么办？直到菜鸟看到了这个

基本上有了这个，就可以天下无敌了，想多少就多少，这就是自由的感觉！

反正菜鸟基本上用的都是这个，不管是颜色还是大小，除非比较好记的，例如：w-1、w-2、p-1、p-2、m-1、mr-1 ……

tailwind 自定义类名

有一个问题，就是当类名太多的时候，感觉也不是很好看，这个时候就要用到复杂一点的tailwind，见文档：www.tailwindcss.cn/docs/reusin…

很多地方都用到一样的样式，就适合这种方式！不然直接多写几个类名也不是不能接受！

@layer

这个@layer components是避免样式冲突和被覆盖的作用，菜鸟感觉不好理解，但是你肯定不会去重写tailwind的类名，至于有没有树摇优化那就是菜鸟没有涉猎了，反正就当默认写法比较好理解，一般也确实就是这样写。

这里也可以看看tailwind4的官网，感觉说得清楚一点：tailwindcss.com/docs/adding…

当然有懂的读者，可以指点江山，激扬文字！

2025/11/27补充

V3版本使用

V3安装之后，不需要在vite.config.js中去引入

但是需要多配置一个postcss.config.js，如下

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

不引入base，style.css如下

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

@layer utilities {
  .table-expand-container {
    @apply relative flex-1;
  }

  .table-expand-content {
    @apply absolute inset-0 h-full w-full;
  }

  .dialog-max-h {
    @apply h-[72vh] overflow-auto;
  }
}

V4版本使用

V4版本的安装比较简单，按照官网的来就行

@import "tailwindcss"; 写在assets/css下的style.css，然后main.js引入即可。

也需要配置tailwind.config.js，如下

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

但是有个问题，就是如果base模块和其他UI框架有冲突，需要这样处理

@layer theme, base, components, utilities;

/* 引入 theme（变量/颜色/spacing/etc.）和 utilities（工具类），但不引入 preflight */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

官网其实有说明，菜鸟一开始没看见：tailwindcss.com/docs/prefli…

类名太多，团队规范

当一个元素类名比较多时，每个人的想法都不一样，那么类名就会比较杂乱，可能每个人都不一样，看着就不是很好，这个时候就要使用自动格式化工具了，让每个人的类名排列顺序都是一样，也避免了不少冲突！

插件地址：github.com/tailwindlab…

只要使用了prettier就可以使用这个，关于prettier的知识可以见：vue3+vite+eslint|prettier+elementplus+国际化+axios封装+pinia

`.prettierrc.json`文件内容

.prettierrc.json文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "tabWidth": 2,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "always",
  "quoteProps": "consistent",
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}

使用tailwind不会忘记css，更是加强css

菜鸟之前对tailwind的误解有点深，其实使用tailwind根本不会降低我们的css水平，相反，你平时多逛逛tailwind官网，反而能发现一些你从未使用过或者使用很少的css属性，你会用tailwind实现，其实就是css会实现，反正都可以增加你对css某个属性的理解，且tailwind还附带了效果示例！

Trae 对 tailwind 的支持

之前的代码

<el-button
  :loading="loading"
  size="large"
  type="primary"
  s =tyle="width: 100%"
  @click.prevent="handleLogin"
>
  <span v-if="!loading">登 录</span>
  <span v-else>登 录 中...</span>
</el-button>

实现效果

感觉Trae对tailwind的支持挺好的，一些简单的效果都可以快速实现！

tailwind 可以替代 scss 等

tailwind4 中有明确的说明，见：tailwindcss.com/docs/compat…

菜鸟只能说tailwind的目标很宏大！

总结

tailwind使用不难，所以菜鸟也没啥可以写得很多或者很复杂的，菜鸟只是希望这个经历可以让各位新手赶紧掌握tailwind，不是css用不起，而是tailwind更有性价比！

工作两年，最后从css转向tailwind了！