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

``` 随后细细的了解了一番，后来发现这是**Tailwind CSS**的写法。于是本着更深一步去了解CSS在现代web页面里使用的方式，仔细研究了一番**Tailwind CSS**到底是什么 * * * ## 简介 - **Tailwind CSS 是什么?** Tailwind CSS 是一个流行的基于类名的 CSS 框架，它旨在简化和加速网页开发。与传统的手写 CSS 不同，Tailwind CSS 提供了一种更直观、更高效的方式来构建现代化的用户界面。 - 为什么使用 **Tailwind CSS？** - **快速开发**：可直接在标签Class后直接追加对应的类名，不用再去切换文件写类名然后再添加样式 ```js

// 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属性颜色,然后在使用的时候

我是自定义颜色cus-black

``` - **易维护**：**Tailwind CSS** 写法是根据已定义好的类型来注入不同的样式，只用维护项目的类名即可 ## 安装与配置 - **如何安装 Tailwind CSS 并创建配置文件。** 1. 安装 Tailwind CSS ```js > npm install -D tailwindcss > npx tailwindcss init ``` 2. 创建Tailwind CSS 配置文件取名**tailwind.config.js** ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` 3. 在src下创建**input.css**文件添加**tailwindcss**指令 ```js @tailwind base; @tailwind components; @tailwind utilities; ``` 4. 启动**CLI**构建过程 ```shell > npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ``` 5. 引入文件到内 ```html

Hello world!

``` - **另外使用React开发的小伙伴如果启新项目的话,可以尝试使用[next.js](https://nextjs.org/)启动项目,自带集成了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](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) ![tailwindVscode.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1a26c3acb854c479e162433ef0c4859~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1344&h=672&s=139336&e=png&b=101627) **其核心功能：** - 自动补全 - 突出显示CSS里的各种错误 - 将鼠标悬停在 Tailwind 类名称上即可查看其完整 CSS - 语法高亮 **另外还有一个[Prettier](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)相关插件，主要是提供了Tailwind类名里的排序功能** ```js ``` ## 示例我尝试使用Next.js以及TailWind CSS快速搭建了一个仿Vue官网的一个页面 ![0AE0F8DD-8EBA-44c8-BF1B-AE934FE4D3F6.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86beed6e5c6948918ac3c4caa02bb22f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=931&s=77472&e=png&b=1e293b) > 本页面还支持了[Dark Mode](https://zhuanlan.zhihu.com/p/141465632)，我会在后面的系列文章里介绍这个如何配置。 ![Dingtalk_20231017164628.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc6b340d47d64b40a9935036a15e8f16~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1388&h=813&s=154800&e=jpg&b=1f1f1f) > 其核心代码大概只用到了**100**行左右，并没有另外的CSS**文件**配置 ## 总结本文章只介绍了我猎奇时尝试使用TailWind CSS的结果，当然使用过程中遇见了不少的问题。比如 - TailWind的类名太多难以记忆，在这里我是频繁去查阅官网解决的这个问题 - 更多的学习难点在于CSS样式由**模块化到原子化的转变** - 阅读英文文档带来的难度不过使用TailWind带来的好处也是显而易见的： - 不用去维护传统的CSS文件 - 开发注意力主要集中在了业务代码页面 - 可自定义自己的CSS样式 - 代码量减少明显,维护成本降低 **最后我会持续更新这个系列,主要目的是学习写技术文章，学习了解TailWind,阅读英文文档，加强个人前端英文词汇量，从零学习CSS。如有错误之处欢迎指出**