原子化 css 框架：Tailwind Css 入门学习

尖椒土豆sss
1,206 阅读4分钟

前言

Tailwind 是一个流行的原子化 css 框架。github 拥有 68k star！

那什么是原子化呢？

定义一些细粒度的 class，叫做原子class，然后在 html 里直接引入这些原子化的 class。

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。 它快速、灵活、可靠，没有运行时负担。

适用场景：

  • 需要快速创建用户界面原型或演示应用时

  • 对于那些不需要复杂样式系统的小型网站、博客、活动页面等

在项目中安装使用

npm install -D tailwindcss postcss autoprefixer

将 Tailwind CSS 安装为 PostCSS 插件是将其与 webpack、Rollup、Vite 和 Parcel 等构建工具集成的最无缝方式。

创建入口文件

statck/css目录下创建 tailwind.css，内容如下：

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

这三行分别是引入 tailwind 的基础样式、组件样式、工具样式的。然后进行全局引入即可。

如 vue 项目：就可以在 main.js 中引入 tailwind.css 即可。

根目录创建 postcss 配置文件

postcss.config.js

加入以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

配置模板路径

npx tailwindcss init

image.png

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

使用 tailwindcss 对项目样式进行改造

  • 改造前list 页面 less 样式

image.png

比如这里的 hotSearchList类 的样式设置了：padding: 10px 20px;

也就是 padding-top、padding-bottom：10px、padding-lef、padding-right：20px。

如果使用 tailwindcss 的话，我看到官网文档如下:

ClassProperties
p-0padding: 0px;
px-0padding-left: 0px; padding-right: 0px;
py-0padding-top: 0px; padding-bottom: 0px;

于是先注释上面的样式，直接在 div 添加 class: px-10 py-20 看看

image.png

发现得到的 css 样式单位是 rem，显然 px-10 这个 class 的 10 不代表 10px！！！

image.png

查看文档发现：0.5 对应的值是： 0.125rem 或 2px。

也就是说 1px == 0.0625rem，tailwindcss 的 0.25 == 1px， 但是请注意，tailwindcss 最小值为 0.5，没有 0.25。

所以，如果想要得到 10px 那就是 0.25 * 10 = 2.5 ，所以对应 class 就是 px-2.5

整体改造前 Dom

<div class="list flex">
  <div class="item" v-for="item in cardList" :key="item.api">
    <div class="header">
      <div class="flex-space-between">
        <div class="title">【{{ item.data.title }}】平台</div>
        <div class="type">{{ item.data.type }}</div>
      </div>
    </div>
    <div class="bodyList">
      <Card :objData="item.data"></Card>
    </div>
  </div>
</div>

传统方式自定义一些类名，然后在 css 中一一实现。

整体改造后 Dom

   <div class="gap-[5px] grid grid-cols-1 md:grid-cols-4">
      <div class="rounded h-96 bg-[#abd3ad]" v-for="item in cardList" :key="item.api">
        <div class="p-[5px]">
          <div class="flex justify-between">
            <div>【{{ item.data.title }}】平台</div>
            <div class="font-medium">{{ item.data.type }}</div>
          </div>
        </div>
        <div class="w-full h-[340px]">
          <Card :objData="item.data"></Card>
        </div>
      </div>
    </div>

解释 list 这个 div 上的各个 class ：

  • grid：启用 CSS 网格布局。
  • grid-cols-1：在小屏幕（手机）上，每行显示 1 个元素。
  • md:grid-cols-4：在中等屏幕及以上（如平板和桌面）上，每行显示 4 个元素。这里 md 是 Tailwind CSS 中的默认中等屏幕断点（768px）。
  • gap-4：设置网格单元之间的间距，可以根据需要调整。

改造前的 less 样式就可以全部删除了。 对于简单网站，基本上页面样式都可以借助 Tailwind css 完成。

效果展示

  • 电脑 image.png

  • 手机端 image.png

基数单位情况

list 的dom 上有一个 gap-1.5 的类名， 转换后间距就是 6px。

如果这个 list 的间距我们想设置为5px。 但是发现Tailwind CSS没有对应间距是 5px 对应的类，基本上都是偶数的值。 这种情况该怎么办呢？ 为了精确设置 gap 为 5px， 有以下两种方式实现。

使用任意值（使用频率低的情况适用）

Tailwind 支持使用任意值（Arbitrary Values），允许用户直接在类名中指定数值。这种方法无需修改配置文件。如果是在非常少数地方使用的话比较推荐这种方式，省时省力，适合使用频率比较低的情况。

直接修改类名为：gap-[5px]

<div class="grid grid-cols-3 gap-[5px]"></div>

image.png

自定义配置（使用频率高情况适用）

可以在 Tailwind 的配置文件中添加自定义的 gap 值。tailwind.config.js 文件，添加或修改 theme.gap 属性。如果对应类使用频率比较高自定义配置就比较合适了。在项目中保持一致并且易于维护。

module.exports = {
    theme: {
        extend: {
            gap: {
                '1.25': '5px', // 添加自定义 gap 值
            },
        },
    },
    plugins: [],
}

image.png

vscode 编辑器安装 Tailwind CSS IntelliSense

扩展插件搜索： Tailwind CSS IntelliSense 安装

image.png

安装完成后再去写 类名自动就有了提示，右侧还会展示出对应单位像素值，非常方便。

image.png

遇到问题

安装完依赖不生效

路径错误： image.png

需要对应你的页面代码路径，我这里对应的应该是 ./pages。

总结

Tailwind CSS 非常适合追求快速开发、易于维护、样式要求不高的项目。

对 CSS 文件体积极度敏感或需要严格控制样式、定制化UI 要求高的项目， Tailwind 就不太适用了。

它也是有弊端的，如：css、html 耦合度高、class太沉重、难以调试等问题。但是都有可缓解的方案，仁者见仁、智者见智。因为你要明白没有十全十美的工具，只有适合自己的工具。 如果对你确实提升了开发效率、解决了开发痛点那它就是适合你的。

avatar
文章
阅读
粉丝