tailwindcss

什么是 Tailwind CSS

Tailwind CSS 是一个可定制化的 CSS 框架，最大的特点是功能类优先，和我们知道的 bootstrap，element ui，antd，veui 等框架一样。将一些 CSS 样式封装好，用来加速我们开发的一个工具。

简单理解 TailwindCSS 就是 CSS 的 lodash, 他是一个增强工具类，你可以用原子类的方式写样式，也可以基于 PostCSS 作为工具函数做 Mixin。

核心概念

功能类优先

传统情况下，开发以下功能会先写 html 结构，然后编写对应的 CSS 样式

div class="chat-notification">
  div class="chat-notification-logo-wrapper">
    img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  /div>
  div class="chat-notification-content">
    h4 class="chat-notification-title">ChitChat/h4>
    p class="chat-notification-message">You have a new message!/p>
  /div>
/div>

style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
/style>

使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。

css 代码解读复制代码
"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  
"flex-shrink-0">
    "h-12 w-12"src="/img/logo.svg" alt="ChitChat Logo">
  
  

    
"text-xl font-medium text-black">ChitChat
    
"text-gray-500">You have a new message!
  

这种方法使我们无需编写自定义的 CSS 即可实现一个完全定制的组件设计，代码变的精简了很多

功能类的好处：

• 不需要为了起类命名而浪费精力 不需要为了设置一些样式额外调价一些wrapper 这样的类名，不必为了某个功能的抽象命名发愁。
• CSS 停止增长 使用传统的方法，每次添加新功能 CSS 文件都会变大。使用功能类，所有内容都是可重用的，因此几乎不需要编写新的 CSS
• 更改会更安全 CSS 是全局性的，永远不知道在修改的时候会破坏掉什么。HTML 中的类是本地的可以随意更改不用担心其他问题

响应式设计

利用断点语法实现 @media 功能，现在加个前缀就可以搞定了。断点系统很灵活。也是目前所有 CSS 框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现图片宽度的变化

之前的写法：

css 代码解读复制代码@media only screen and (max-width:1280px) { 
    img {     
        width:196px; 
    } 
}
@media only screen and (max-width: 760px) { 
    img {     
        width:128px; 
    } 
}

但是用 Tailwind CSS，一句话就能搞定：

ini

 代码解读
复制代码

伪类: 悬停、焦点和其它状态

支持伪类前缀标签，以及可以和响应式一起使用

ini 代码解读复制代码
  Hover

自定义样式

因为 tailwind 是最基础的框架，tailwindcss 默认的 utility，base，component 不足以满足所有的场景；

使用 @layer 指令，Tailwind 自动将这些样式移动到 @tailwind base，@tailwind utility，@tailwind component 的位置

less 代码解读复制代码 @layer components {
  .btn-blue {@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;}
  .btn-blue:hover {@apply bg-blue-700;}
}

Tailwind 语法糖

less 代码解读复制代码 @tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {@apply text-2xl;}
}

@layer components {
  .btn {
    @apply bg-gray-500 text-white font-bold;
    @apply py-2 px-4 rounded;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    background-color: theme("colors.blue-500");
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {filter: none;}
  }
  @responsive {
    .bg-opacity-none {@apply opacity-0;}
  }
}

@screen sm {/* ... */}

.btn-blue {background-color: theme('colors.blue.500');
}

• @tailwind：使用 @Tailwind 指令将 Tailwind 的 base, components, utilities 插入到 CSS 中。
• @apply：使用 @apply 将任何样式内联到您自己的自定义 CSS 中。
• @layer：使用 @layer 指令告诉 Tailwind 属于一组自定义样式的“块”。在 base, components, utilities 有效。
• @variants：您可以通过在 @variants 指令中包装它们的定义来生成响应式、hover, focus, active 和其他伪类。
• @responsive：通过将 class 的定义包装在 @responsive 指令中，您可以生成自己 class 的响应式。
• @screen: 使用 @screen 指令并按名称引用断点，而不是在您自己的 CSS 中复制它们的值。
• theme()：使用 theme() 函数和 . 访问你的 Tailwind 配置值。

自定义配置

想要自定义配置，需要先了解 tailwindcss 的默认配置

在 tailwind.config.js 中可以扩展自己的自定义配置项

css 代码解读复制代码 // tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"],
    },
    borderWidth: {
      default: "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
    },
    extend: {
      colors: {
        cyan: "#9cdbff",
      },
      spacing: {
        "96": "24rem",
        "128": "32rem",
      },
    },
  },
};

有一套专业的 UI 属性值

Tailwind CSS 虽然没有封装任何 UI，但是他默认提供的一些属性值都是很专业的。比如颜色（专业制作的开箱即用的默认调色板）

还有各种内边距外边距，宽高，文字大小行高颜色等等。即使你不懂设计，按照他内置的属性做出来的东西，也不会太差。

和其他的 CSS 框架有什么区别？

CSS 发展到现在，基本经历了三个阶段。

第一个阶段，原生写法

是类似于编程中面向过程的写法，需要什么样式，自己在 CSS 中写什么样式。对代码有洁癖的程序员会进行简单的 CSS 复用。但是也只是简单的复用，大多数时候还是需要什么写什么，想怎么写怎么写。

第二个阶段，CSS 组件化

类似于编程中面向对象的写法，将相同视觉的 UI 封装成一个组件。比如一个按钮，整个项目中，这个按钮被多次使用，并且样式一致。那么就可以封装成一个按钮类。使用的时候直接使用这个类名称就 OK。

这也是 bootstrap，element ui，antd，veui 的做法。

这种框架的优势在于，封装了大量常见的 UI。比如你需要一个表单，需要一个导航，需要一个弹窗，Card 卡片。有现成的 class。直接拿过来用，就可以快速的完成效果。完全不需要动手写 CSS。

这也是目前比较流行的方法。这几年几乎很少有项目是自己一点一点手写样式的了，多多少少都会使用到一些 css 框架。

对于一些需要快速交付的项目，非常适合使用这种组件化 css 框架

第三个阶段，CSS 零件化

也叫做 CSS 原子化。和上面第一个阶段第二个阶段都有类似的地方。依旧是组件，只是每个组件都是一个单一功能的 CSS 属性。

上面第一个阶段的时候，我们讲了有些有对代码有追求的人，会开始复用 CSS。

比如页面中大量的用到 float:left。那么就可以封装一个类，比如是这样

sql

 代码解读
复制代码.f-left {float:left}

然后需要使用 float:left的时候，直接使用 .f-left 就可以。

但是我们自己写 css 的时候，仅仅是封装一些常用的简单的类，绝大多数的 CSS，都需要动手去写 css。比如你要写个宽度 12 像素。你就得老老实实的去写 width:12px，逃避不了，不过估计也没人想过逃避。

Tailwind CSS 就是第三个阶段的产物，它做了什么呢？

它将所有的 css 属性全部封装成语义化的类，比如你想要一个 float:left，它已经帮你封装好了，你直接使用一个float-left 就可以。

Tailwind CSS 和内联样式有什么区别？

Tailwind CSS 是把所有样式写在 class 里面。内联样式是把所有样式写在 style 里面，所以会让很多人造成一个印象：Tailwind CSS 和内联样式差不多，大同小异。

其实是有很大的区别，Tailwind CSS 相比于内联样式，有以下几点特点：

有约束的设计

使用内联样式，每个值都是一个随便填写的数字。使用 Tailwind CSS 类，你要从预先定义好的设计系统中选择样式，这样你开发出来的页面，视觉上会保持一致，不会乱七八糟。

响应式设计

您不能在内联样式中使用媒体查询，但可以使用 Tailwind 的响应式类来轻松开发完全响应式界面。比如你可以在 class 里写一个sm:text-left, 代表的是，在小屏幕上，文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。

修饰符

把修饰符，如各种伪类、暗黑模式、响应式设计至于前缀的设计用起来很顺手

ini

 代码解读
复制代码

Tailwind CSS 的文件很大？

是的。因为它需要把所有的 CSS 属性全部都封装一遍，所以 CSS 文件巨大。所以不建议在页面内直接引入 Tailwind 原生 CSS 文件的做法。

Tailwind 在构建生产文件时引入PurgeCSS，这个工具在构建的时候，对代码进行正则匹配，剔除没有使用过的原子类。这意味着最后打包出来的 CSS 文件是极小的，一般的项目构建出来的 CSS 文件, 再经过压缩甚至不会超过 10K。

When removing unused styles with Tailwind, it’s very hard to end up with more than 10kb of compressed CSS.

Taillwind 使用指南

通过 npm 安装

kotlin 代码解读复制代码
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建配置文件

接下来生成tailwind.config.js 和 postcss.config.js 文件：

csharp 代码解读复制代码
npx tailwind init -p

npx tailwind init --full

CSS 中引入 Tailwind

less 代码解读复制代码 /* ./src/index.css */

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

由于 Chromium 中的 bug，请确保包含 /*！@import */ 注释，以避免开发时在 Chrome DevTools 中出现的性能问题。此问题已在 Canary 中修复，但尚未发布

VSCode 补全插件

Tailwind CSS IntelliSense

其他

• Tailwind CSS v2.0 开始放弃对 IE 11 的支持，如果您需要支持 IE 11，我们建议继续使用 Tailwind CSS v1.9
• Tailwind CSS v2.0 不再支持 Node.js 8 或 10。要建立您的 CSS，您需要确保您在本地和 CI 环境中运行 Node.js 12.13.0 或更高版本。

参考资料

tailwindcss 官网

如何评价 CSS 框架 TailwindCSS

nd CSS v2.0 开始放弃对 IE 11 的支持，如果您需要支持 IE 11，我们建议继续使用 Tailwind CSS v1.9

• Tailwind CSS v2.0 不再支持 Node.js 8 或 10。要建立您的 CSS，您需要确保您在本地和 CI 环境中运行 Node.js 12.13.0 或更高版本。

参考资料

tailwindcss 官网

如何评价 CSS 框架 TailwindCSS

深入浅出 tailwindcss