Tailwind CSS：现代化网页开发样式指南(一)

前言

React官网在前段时间更新了一版, 打开控制台查看元素的时候看见出现了如下这样的代码，虎躯一震的同时又有点好奇，这又是加了什么高级的东西。

js 复制代码

    <div class="mx-auto flex flex-col" />

随后细细的了解了一番，后来发现这是Tailwind CSS 的写法。于是本着更深一步去了解CSS在现代web页面里使用的方式，仔细研究了一番Tailwind CSS到底是什么

简介

Tailwind CSS 是什么? Tailwind CSS 是一个流行的基于类名的 CSS 框架，它旨在简化和加速网页开发。与传统的手写 CSS 不同，Tailwind CSS 提供了一种更直观、更高效的方式来构建现代化的用户界面。

为什么使用 Tailwind CSS？

快速开发：可直接在标签Class后直接追加对应的类名，不用再去切换文件写类名然后再添加样式

js 复制代码

<div class='px-9 pt-24 pb-24 w-full' />

// px-9
{
	padding-left: 2.25rem/* 36px */;
  padding-right: 2.25rem/* 36px */;
}

// pt-24
{
	padding-top: 6rem/* 96px */
}

// pb-24
{
	padding-bottom: 6rem/* 96px */
}

// w-full
{
	width: '100%'
}

// 快速添加样式,而不用去单独编写文件样式,更加具有原子化样式的特点

可定制 ：Tailwind CSS 支持自定义颜色，自定义颜色，间距等

js 复制代码

// 在tailwindcss.config.ts 文件

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [
    require('flowbite/plugin')
  ],
  theme: {
    extend: {
      colors:{
        'cus-black':'#213547',
        'cus-green':'#42b883',
      },
    },
  },
}
export default config

// 在这里自定义了colors类下面的cus-black属性颜色,然后在使用的时候
<h2 className="text-cus-black">
    我是自定义颜色cus-black
</h2>

易维护 ：Tailwind CSS 写法是根据已定义好的类型来注入不同的样式，只用维护项目的类名即可

安装与配置

如何安装 Tailwind CSS 并创建配置文件。

安装 Tailwind CSS

js 复制代码

> npm install -D tailwindcss

> npx tailwindcss init

创建Tailwind CSS 配置文件取名tailwind.config.js

js 复制代码

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

在src下创建input.css 文件添加tailwindcss指令

js 复制代码

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

启动CLI构建过程

shell 复制代码

> npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

引入文件到内

html 复制代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

另外使用React开发的小伙伴如果启新项目的话,可以尝试使用next.js启动项目,自带集成了Tailwind CSS，可以省去上面最后三个步骤。以下是安装Next.js并配置Tailwindcss的操作命令

js 复制代码

// 快速安装next的一个project
npx create-next-app@latest

// 安装的步骤
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
// 这里选择yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes

编辑器的相关设置

Tailwindcss自身提供了一套集成在vsCode里的插件TailWind CSS IntelliSense

其核心功能：

自动补全
突出显示CSS里的各种错误
将鼠标悬停在 Tailwind 类名称上即可查看其完整 CSS
语法高亮

另外还有一个Prettier相关插件，主要是提供了Tailwind类名里的排序功能

js 复制代码

    <!-- Before -->
    <button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

    <!-- After -->
    <button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

示例

我尝试使用Next.js以及TailWind CSS快速搭建了一个仿Vue官网的一个页面

本页面还支持了Dark Mode，我会在后面的系列文章里介绍这个如何配置。

其核心代码大概只用到了100 行左右，并没有另外的CSS文件配置

总结

本文章只介绍了我猎奇时尝试使用TailWind CSS的结果，当然使用过程中遇见了不少的问题。比如

TailWind的类名太多难以记忆，在这里我是频繁去查阅官网解决的这个问题
更多的学习难点在于CSS样式由模块化到原子化的转变
阅读英文文档带来的难度

不过使用TailWind带来的好处也是显而易见的：

不用去维护传统的CSS文件
开发注意力主要集中在了业务代码页面
可自定义自己的CSS样式
代码量减少明显,维护成本降低

最后我会持续更新这个系列,主要目的是学习写技术文章，学习了解TailWind,阅读英文文档，加强个人前端英文词汇量，从零学习CSS。如有错误之处欢迎指出