起因

最近看到 freeCodeCamp 微信公众号的一篇文章的；

那篇文章当时看到一句话

在这篇文章里，我们将使用 React、Tailwind CSS、Netlify 等等行业标准工具创建一个作品集网站。

这句话中有一个关键词 Tailwind CSS ，这是我还没整过的玩意，最近也是在准备一个春招，有遇到面试官提过一下，我当时实话说自己还没用过 doge ，不过记住了这个玩意，想着来摸索下这个项目是如何使用 Tailwind CSS 的，顺带再水篇博文；

动起来！

那肯定就先按照那个公众号把整个项目弄起来，部署起来，先看看这个跑不跑得起来（不能跑就不看了 doge ，bushi）；

部署后的网站链接：https://kok-s0s-portfolio.netlify.app/

先清楚它是如何被调用的

Google 一搜 Tailwind CSS creat react app ，ok！

第一篇就是你了 --> 在 Create React App 中安装 Tailwind CSS

它的官方文档就是写的很详细了（自己看去吧）

阅读它的代码

公众号文章有事先说明

Tailwind 允许我们通过组合类名（classnames）将多种样式轻松应用到 React 项目上，给应用程序一个专业的外观。

个人我肯定先看项目被挂载的主要组件 App.js ；

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
    return (
        <main className="text-gray-400 bg-gray-900 body-font">
            <Navbar />
            <About />
            <Projects />
            <Skills />
            <Testimonials />
            <Contact />
        </main>
    );
}

接下来就是挺“简朴”的操作，在 Tailwind CSS 官方文档搜索这些组件文件中用到的类名，接下来列出这个项目我搜索过的所有有结果的类名以及该类名的作用：

App.js

• text-gray-400 字体颜色
• bg-gray-900 背景颜色
• body-font 文档没搜到，大概是使用浏览器默认字体的意思

About.js

• container 容器 --> 看文档很详细

  • mx-auto 能使一个容器居中
  • px-10 添加水平内边距，左右都有
  • py-20 添加垂直方向的内边距
  • pr-24 即 padding-right: 6rem;
  • py-2 即 padding-top: 0.5rem; padding-bottom: 0.5rem;
  • px-6 即 padding-left: 1.5rem; padding-right: 1.5rem;

• 响应式设计

  • sm 断点 --> 最小宽度 640px，即 @media (min-width: 640px) { ... }
  • md 断点 --> 最小宽度 768px，即 @media (min-width: 768px) { ... }
  • lg 断点 --> 最小宽度 1024px 即 @media (min-width: 1024px) { ... }

• flex 看文档

  • flex-row 使用 flex-row 用来沿与文本相同的方向水平放置 flex 子项 --> 横向
  • flex-col 使用 flex-col 用来沿垂直方向放置 flex 子项 --> 纵向
  • flex-grow 使用 flex-grow 允许一个 flex 项目放大，以填充任何可用空间
  • items-center 使用 items-center 沿着容器的交叉轴中心对齐项目，即垂直居中效果
  • items-start 使用 items-start 将项目沿着容器交叉轴的起点对齐：

• w-1/2 即宽度为 width: 50% 分数为比例，数字就是具体数值

• text-left 文字向左对齐

• text-center 文字居中对齐

• mb-16 即 margin-bottom: 4rem;

• mb-0 即 margin-bottom: 0px;

• title-font

• text-4xl 即 font-size: 2.25rem; line-height: 2.5rem;

• text-3xl 即 font-size: 1.875rem; line-height: 2.25rem;

• mb-4 即 margin-bottom: 1rem;

• font-medium 即 font-weight: 500;

• text-white 白色文字，即 --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity));

• hidden 隐藏，使用 hidden 设置一个元素为 display: none，并从页面布局中移除

• inline-block 使用 inline-block 创建一个内联块级元素

• mb-8 即 margin-bottom: 2rem;

• leading-relaxed 即 line-height: 1.625;

• justify-center 使用 justify-start 让项目沿着容器主轴的起点对齐

• inline-flex 使用 inline-flex 来创建一个内联的 flex 容器

• bg-green-500 即 --tw-bg-opacity: 1; background-color: rgba(16, 185, 129, var(--tw-bg-opacity));

• border-0 即 border-width: 0px; 边框厚度

• focus 添加 focus: 前缀，以在 focus 状态时应用一个功能类

• outline-none 使用 outline-none 来隐藏焦点元素的默认浏览器轮廓

• hover 添加 hover: 前缀，以在 hover 状态时应用一个功能类

• bg-green-600 即 --tw-bg-opacity: 1; background-color: rgba(5, 150, 105, var(--tw-bg-opacity));

• rounded 即 border-radius: 0.25rem;

• text-lg 即 font-size: 1.125rem; line-height: 1.75rem;

• ml-4 即 margin-left: 1rem;

• max-w-lg 设置最大宽度，即 max-width: 32rem;

• w-full 即 width: 100%;

• w-5/6 即 width: 83.333333%;

• object-cover 即 object-fit: cover; 使用 .object-cover 调整元素内容的大小以覆盖其容器

• object-center 使用 object-{side} 功能来指定可替换元素的内容在其容器中的位置。

End

搜完 About.js ，就大概摸索出一些规律和使用方法：

• 这里面很多规定大都是将“1”分为四份；
• 很简写
  • top --> t
  • left --> l
  • right --> r
  • bottom --> b
  • margin --> m
  • padding --> p
  • top、bottom --> y
  • left、right --> x
  • high --> h
  • width --> w
  • 背景 --> bg
  • 文字 --> text
  • 设置最大最小宽度 --> max、min
• flex 的看多就清楚了 doge
• 其实英语熟练点就很快上手了；
• 多敲代码多实践；

开源网站真的有很多不错的代码值得学习；

课外读物

Why I Don't Like Tailwind CSS