tailwindcss入门指南唠一唠已经好久没有写文章了，上次写文章还是在一个半月前，面上小破站之后，感觉人都变得懒惰

唠一唠

已经好久没有写文章了，上次写文章还是在一个半月前，面上小破站之后，感觉人都变得懒惰了，两个月前为了面试天天待在图书馆的日子至今记忆犹新，别说，还是挺怀念那种感觉的。来公司也快两个月了，如果大家感兴趣的话，我之后可以写一篇我在小破站的实习体验，有一说一，小破站的氛围真的好，叫发电厂也是有原因的，哈哈哈，bilibili~干杯。

在之前简历中的两个项目中，在样式方面一个用的是less，另一个是sass。在来公司之前也了解过一点tailwindcss,但是给我的第一印象就是简洁，原子化的css将样式拆分的很细，当时感觉还要记这些，感觉还不如直接写类来的快，就没去仔细再看过了。到了公司，接手了一个项目，看着前人写好的原子化样式，坏了，看不懂了，咋办？本着'遇事不决，就给我学'的人生哲理，还能咋办，学呗。之前不想学的最大原因是因为感觉要记得太多了，但当我去深入了解的时候，才发现其实很多都不用记的，在开发中要用的时候直接去搜就行了，给大家一个中文网，用起来很方便，tailwindcss 。

首先，声明一下这是一份tailwindcss的入门适用教程，旨在记录学习过程，大佬勿cue。 ^ . ^

tailwindcss学习

学习的最好的方式就是看官方文档哈，过程可能有点枯燥，但总是能学到很多东西的，这里附上TailwindCSS的中文文 --- TailwindCSS 中文网

什么是tailwindcss？

相比于其他CSS框架，它不侧重于提供预先设计好的UI组件，而是提供一套广泛的低级CSS类，每个类可能对应着一个或者多个基础的css样式组合，一句话概括的话，tailwindcss给我们提供了一种原子化的css样式。

为什么要使用tailwindcss？

之前的介绍有说到，tailwindcss提供一种原子化的css样式，原子化意味着将之前的样式类拆分成一个又一个单独的原子类，多个原子类组合也能实现我们之前在样式类中定义一大堆的css属性，直白的说，我们可以写更少的代码了！（果然，懒惰促进科学发展 ~ . ~ ）。

还有就是，在一个大型项目开发中，样式类取名也是一项麻烦事，对于经常词穷的我来说，就算用了BEM命名规范，有时候感觉还是很麻烦，而tailwindcss就不存在这种困扰了，将原子类直接写在标签内，也不需要再自己定义一些五花八门的类名了，这也有利于项目的一致性。

虽然框架本身包含大量的类，但通过使用PurgeCSS 或Tailwind 的自动优化功能，生产环境中的CSS只会包含实际使用的类，大大减少了CSS文件的大小，优化了加载速度。

有着强大的生态系统，Tailwind社区活跃，提供了丰富的插件、主题和资源，以及与其他框架和工具也有着很良好的集成，比如Vue.js, React、Next.js等等，这使得他的适用范围变得更加广泛。

安装

// 全局安装 tailwindcss autoprefixer
// 其中autoprefixer通常用于自动为CSS规则添加浏览器前缀，确保跨浏览器兼容性
npm install -D tailwindcss autoprefixer

// 初始化tailwindcss 项目配置
npx tailwindcss init

初始化配置文件

我们运行 npx tailwindcss init 初始化后在项目目录会生成一个tailwind.config.js文件，如下：

在tailwind.config.js 文件中的content数组里面配置路径，添加所有文件的路径，在Vue项目中如下，可根据自己的具体项目要匹配的文件来书写。

我这里以vite为例，在vite.config.js文件中配置PostCss插件，哦，不对，Vite 自带对 PostCSS 的支持，并且对于大多数使用场景，尤其是当你主要依赖于像 Tailwind CSS 这样的工具时，你可能不需要在 vite.config.js 中手动配置 PostCSS 插件。PostCSS用来将tailwindcss转化成css。基础配置如下

当然，如果你的Vite项目有特殊的PostCSS需求，比如你需要自定义的浏览器兼容性设置（上述autoprefixer插件其实也就是解决浏览器兼容性问题的）时，你可以在vite.config.js进行如下配置：

好了配置了这么多，让我们看一下tailwindcss在我们的项目中是否能用了呢

将App.vue的文件改成如下代码：

我们运行看效果：

完美！但是可能会有人说了，这些原子类名怎么记得住啊，这么多，当然不需要你记啦。在日常的项目开发中，如果是在同事的代码基础上进行修改，看不懂的原子类样式我们直接去文档里搜就行了，在自己进行单独项目或需求开发的时候，需要什么样式也是同样去搜索即可了，有些简单易懂的原子类名，一看就知道啥意思了，比如w-4,就是设置宽度，其中4代表4个0.25rem，也就是1rem，在tailwindcss中长度1通常指的就是0.25rem，而rem是基于HTML根元素的大小来定的，默认情况下，大多数浏览器将根元素的字体大小设置为 16px，因此默认情况下 1rem 等于 16px。我们可以用开头给的网站来搜索一下，看我们分析的是否正确

OK，我们在看看之前给hello文字加的样式是啥意思。

我们先来看看bg-blue-500是啥意思，先从字面上猜，我觉得它应该指的是背景颜色，当然肯定是偏蓝色的。

我们查询可以看到，确实如此。

第二、三个比较简单，我们就不一一查询了，我们看下第四个是啥意思，rounded-lg:

搜索之后可以看到，原来指的是边框的圆角，所以其实tailwind也不需要记太多东西，当你需要用的时候去文档搜即可。

比如我在自己进行单独项目开发的时候，想设置边框的一些样式，不要犹豫，不记得了直接去文档搜。如下：

顺藤摸瓜，我们就能慢慢找到我们想要的样式，这东西其实写的多了，慢慢就熟练了，后续就不用再去一个个搜索了，毕竟每个新事物总要有一段适应期嘛。

自定义样式

当然，在 tailwind.config.js 文件中，也支持你根据项目的具体需求对Tailwind CSS的预设进行自定义，以更好地适应设计规范。以下是一些调整配置的例子

1. 自定义颜色

假设你的项目需要一套特定的品牌色彩，你可以添加或覆盖默认的颜色变量。

export default defineConfig({
  plugins: [vue()],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1E40AF', // 自定义品牌主色
        'brand-secondary': '#F97316', // 第二主色
        'brand-gray-light': '#E2E8F0', // 浅灰色
        // 更多自定义颜色...
      },
    },
  },
});

2. 自定义字体

如果你想使用项目中特定的字体家族，可以在配置中添加它们。

export default defineConfig({
  plugins: [vue()],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Open Sans"', 'ui-sans-serif', 'system-ui'], // 替换默认的无衬线字体
        serif: ['"Merriweather"', 'ui-serif'], // 添加衬线字体
        mono: ['Menlo', 'ui-monospace', 'SFMono-Regular'], // 自定义等宽字体
      },
    },
  },
});

3. 调整间距

如果你觉得默认的间距不够用，或者想增加一些特定的间距值，可以在spacing中扩展。

export default defineConfig({
  plugins: [vue()],
  theme: {
    extend: {
      spacing: {
        '128': '32rem', // 添加一个自定义的间距值
        '7xl': '5rem', // 自定义一个更大的字号或间距等级
      },
    },
  },
});

4. 增加自定义组件

除了预设的实用类，你还可以定义自己的组件样式。

export default defineConfig({
  plugins: [vue()],
  theme: {
    extend: {
      boxShadow: {
        'custom-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)', // 自定义阴影
      },
    },
  },
});

基础教程大概就上述这些内容，如果你想要更详细的了解它，官方文档依旧是最好的学习资料。相信你看完上述内容，对tailwindcss也有了一定的了解了。