快速掌握原子化CSS框架：Tailwindcss

please tell me

已于 2024-03-29 15:21:30 修改

阅读量1.1k

点赞数

分类专栏： # 前端常见面试题文章标签： css 前端 tailwind

于 2023-07-24 16:15:00 首次发布

本文链接：https://blog.csdn.net/WXY19990803/article/details/131898761

版权

前端常见面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

背景

我们平时写css的方式可以是原生式写法，比如这样

<div class="aaa"></div>

.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}

也可以是组件化写法，比如这样

<div class="aaa bbb"></div>
<div class="aaa ccc"></div>

.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}
.bbb {
    color: #fff;
}
.ccc {
    color: #000;
}

而原子化CSS的写法是这样的

<div class="text-base p-1 border border-black border-solid"></div>

.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

原子化CSS将类型定为小型、独立的类，每个类只负责一个具体的样式属性。这些类通常以非常简洁和描述性的命名方式命名
与传统的CSS编写方式相比，原子化CSS的主要特点是将样式细粒度化，以模块化的方式构建网页。这种方法的目标是最大的程度地提高样式的重用性和可维护性。通过将样式确定为小型的类型，可以轻松地把它们组合在一起来构建复杂的布局和设计

Tailwindcss使用

1、安装

官网：https://tailwindcss.com/docs/installation 。下面是vite + vue3 + tailwindcss实践
安装对等依赖项并创建 tailwind.config.js 文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

创建 postcss.config.js 文件，并将 Tailwind 添加到配置文件中

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

在 tailwind.config.js 文件中配置模版路径，因为是在vue项目中，所以和官网有些区别

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

创建 css 文件加上下面三行代码，并在 main.js 文件中引入。下面对应的就是基础样式、组件样式、工具样式

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

启动服务，可以看到正确加上了样式

<div class='text-base p-1 border border-black border-solid bg-slate-200'>haole</div>

请添加图片描述

2、正式使用前要理解的问题

【2.1】为什么使用 tailwindcss 需要安装 postcss 和 autoprefixer
在Tailwind CSS中，PostCSS用于处理CSS文件并应用各种转换和插件。它负责处理CSS的自动前缀添加、嵌套、变量替换、支持CSS未来特性的转换等。通过使用PostCSS，Tailwind CSS可以提供一些强大的功能，例如自定义主题、响应式设计、浏览器兼容性等
Autoprefixer是一个PostCSS插件，用于自动添加CSS前缀
【2.2】上面正常起服务后会出现一个问题，在更改原子化类名的时候，样式并没有生效，只能重启项目才能生效：
vite版本过低，最开始创建的vite版本是 1.0.0-rc.13
升级最新 vite 版本体验

npm install vite@latest --save-dev
yarn add vite@latest --dev

安装完成后，需要在 vite.config.js 文件中进行配置。在此之前也需要安装配置 @vitejs/plugin-vue 插件

npm install @vitejs/plugin-vue --save-dev

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

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

3、使用

html 举例

<div class='text-base text-slate-500 p-1 border border-black border-solid'>haole</div>

请添加图片描述

正常的使用就是看官网查看原子化类名然后进行使用，但是这个类名对应的值是可以在 tailwind.config.js 的 theme.extend 中进行修改的，比如下面就是修改了p-1的值，由 0.25rem 转换为 30px

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        }
    },
  },
  plugins: [],
}

text-base是 font-size 和 line-height 两个样式，这个可以通过数组进行配置修改

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        },
        fontSize: {
            'base': ['30px', '2rem']
        }
    },
  },
  plugins: [],
}

请添加图片描述

tailwind 提供的所有内置原子 class 都可以配置，但这些都是全局更改，临时更改可以使用 []语法。举个例子text-[25px]

<div class='text-[25px] text-slate-500 p-1 border border-black border-solid'>haole</div>

请添加图片描述

经常使用的 hover 样式，可以这样指定

<div class='text-[25px] hover:text-[14px] text-slate-500 p-1 border border-black border-solid'>haole</div>

请添加图片描述

写响应式页面的时候，可以使用md:来实现

<div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>haole</div>

请添加图片描述

断点的位置也可以配置

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        },
        fontSize: {
            'base': ['30px', '2rem']
        }
    },
    screens: {
        'md': '300px'
    }
  },
  plugins: [],
}

在开发中，我们可能为实现一个功能样式会用到很多的类型，写起来跟繁琐，比如下面这样

<template>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第一个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第二个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第三个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第四个模块</div>
</template>

这个问题可以通过用 @layer @apply指令来扩展解决

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

@layer components {
    .example {
        @apply text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid
    }
}