Tailwind-原子化CSS框架

在传统 CSS 中，我们通常会创建一系列类来表示特定的组件或样式组合，比如.button、.header等。然而，在 Tailwind CSS 中，情况则有所不同。

原子化 CSS 是一种将样式分解成最小可复用部分的方法，这些部分被称为“原子”。在 Tailwind CSS 中，这些原子就是一系列预定义的实用程序类，它们代表了单一的样式属性和值，例如：

• .text-red-500 控制文本颜色为红色。
• .py-2 设置上下内边距为 0.5rem。
• .rounded 应用圆角效果。

假如要实现一个如下的按钮效果

传统的CSS写法是这样的：

<button class="button"> Button </button>

.button {
background-color: #3b82f6;
color: #ffffff;
font-weight: bold;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.25rem;
}

.button:hover {
background-color: #1d4ed8;
}

先在html中指定使用的class，然后在css中定义这个class的样式。这种写法的结构是这样:

而使用Tailwind原子化css是这样

 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>

来到浏览器的检查界面，这些不同的class被解析成了一个个对应的css代码

原子化的css结构是这样:

和传统的css对比可以看出Tailwind CSS 的原子化特性体现在其庞大的实用程序类集合中，这些类覆盖了从布局到样式的各个方面。例如，你可以使用.flex、.justify-center、.items-start等类来创建灵活的布局，或者使用.bg-gray-100、.text-white等类来控制颜色。那么这么优雅的原子化框架，怎么在我们的项目中使用呢？ 下面我将为大家展示Tailwind的搭建过程。

准备工作

初始化vue环境

1. npm init vite

配置Tailwind CSS

1. npm install -D tailwindcss postcss autoprefixer在项目中安装 Tailwind CSS

2.npx tailwindcss init -p 初始化 Tailwind CSS

这将在你的项目根目录下创建 tailwind.config.js 文件，你可以在此文件中编辑CSS样式的单位。

3. 在tailwind.config.js目录下输入指令，控制tailwind生效的区域与文件类型

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

4. 创建Tailwind样式

在src目录下创建如下文件：

来到tailwind.css文件中引入基本的样式类别，输入以下三行代码:

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

5.将该样式引入到vue项目中

在项目的入口文件main.js中输入指令引入该样式

做完这些操作我们就可以在组件中使用tailwind提供的class了。

tailwind的基本使用

以该代码为例:

<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
</template>

<script setup>
</script>

<style></style>

输入指令: npm run dev

我们可以看到页面上已经出现了一个button按钮，并且已经初始化好了样式。

而这些用到的原子 class是由tailwind 提供的，在浏览器的检查页面我们可以看到:

这里的px-4代表padding-left:1rem;padding-right:1rem;这是tailwind的默认值，我们可以在配置文件中修改它的默认值。

在tailwind.config.js中修改px-4的值，设置为5rem，刷新页面，检查可以发现px-4的值发生了改变。

通过这种方法修改的配置会在tailwind作用的所有区域都生效，这时候有的同学就会问：如果只需要在修改在某个标签上的样式呢？

如果想要修改某个可以使用[],例如我们想要将这个按钮的字体大小修改为50px可以这样写:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-[50px]">
    Button
  </button>

text-[50px]会有font-size:50px的样式

Tailwind的优点

使用tailwind，我们可以不再需要在各种各样的css文件中反复横跳，只要引入不同的类名就可以实现不同的样式，下面是几条使用tailwind的优点。

1. 可复用性：原子类可以被多次使用，减少重复的 CSS 规则。
2. 灵活性：开发者可以自由组合这些原子类来创建几乎无限的样式组合，而无需编写额外的 CSS。
3. 可维护性：由于样式被分离成独立的原子，当需要修改样式时，只需要修改单个原子类即可。
4. 响应式设计：原子类通常包括响应式变体，如 .sm:text-lg，这使得创建响应式布局更加容易。
5. 性能优化：通过消除不必要的 CSS 规则，原子化 CSS 可以帮助减小 CSS 文件的大小，从而提高页面加载速度。

总结

tailwind是一个用起来非常高效的css框架，传统的css是定义class再引用，而原子化css则是预定义好了一些class，再通过组合的方式编写，而且所有的预定义class都可以通过配置文件修改，也可以通过xxx-[]的方式在局部修改。本篇文章只是对tailwind使用的简单介绍，如果需要具体学习还请参考官方文档：

tailwind官方文档

本篇文章就到此结束了，希望对你有所帮助。