Tailwindcss

无需离开HTML，即可快速建立现代网站

tailwindcss的第一个版本是Adam Wathan在2017年11月1日开发的，项目被描述为一个效果优先(utilit-first)的css框架，

什么是tailwind

Tailwindcss是一款CSS的框架，是一个帮你预定了很多类（tokenlist）的css文件集合它包含很多经常使用的CSS样式，例如阴影，下划线，填充，边距，边框等，这意味着大多数时间都不需要编写CSS，因为它已经为你预定义了。你所需要做的就是在你的html代码结构上添加已经在tailwindcss文件中定义好的类就行

如何使用

只需要在你的html元素中使用tailwind为你预设好的css类就可以了

<div class="rounded-lg p-4"> Click </div>

在create-react-app中使用

创建一个工程

npx create-react-app app-name --template typescript
cd app-name

安装tailwindcss

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

Create React App 尚未支持 PostCSS 8，所以您需要安装 Tailwind CSS v2.0 PostCSS 7 兼容性版本。

配置craco

npm install @craco/craco

安装完毕后，更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts。

  {
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

接下来，在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer作为 PostCSS 插件。

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

如果您计划使用任何其他 PostCSS 插件，您应该阅读我们的文档使用 PostCSS 作为您的预处理器，以获得更多关于集成它们和 Tailwind 的最佳方式的细节。

创建你的配置文件

接下来，生成您的 tailwind.config.js 文件：

npx tailwindcss-cli@latest init

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

阅读配置文档了解更多。

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

请阅读我们单独的优化生产指南，以了解更多关于摇树优化未使用的样式来获得最佳性能的信息。

在您的 CSS 中引入 Tailwind

打开 Create React App 默认为您生成的 ./src/index.css 文件并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

阅读我们的文档添加基础样式，提取组件，和添加新的功能类，以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。

最后，确保您的 CSS 文件被导入到您的 ./src/index.js 文件中。

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
+ import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

  // ...

对比市面的css/ui框架

做一个简单对比，基本所有框架都是为了，解决修饰样式颗粒度的问题，以下是四种不同程度的颗粒度：

<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
<div class="rounded-lg p-4"> Click </div> 
<div class="button"> Click </div> 
<Button> Click </Button>

从上到下，颗粒度越来越大，约束性变高，自由度不足，最下面的Button类似与ant design为我们提供的组件，粒度大的同时带来了自定义样式的麻烦。TailWindCss位于第二层，而bootstrap属于第三层，TailWindCss受欢迎的原因无非是更好用的原子化css

用bootstrap开发

bootstarp是一个基于面向对象的css（Object Oriented CSS）方法论，比较受欢迎的管理样式表方法。例如，通过OOCSS，你可以通过一个button类来指定一个html元素而不是写一大堆的class和css样式

<button type="button" class="btn btn-primary">Primary</button>

但是如果你需要在一个特殊的地方使用一个特殊的样式，比如说增加一个内边距，那么bootstrap的表现就不是很好

用tailwindcss开发

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

  Button

</button>

正如我们所看到的，在Bootstrap的情况下，标记要简单得多，所以您可能会问为什么不使用Bootstrap，因为它更简单？想象一个场景：如果你想让按钮在一个特定的页面上稍微小一点怎么办？您想为这种独特的情况创建一个全新的尺码类别吗？在这种情况下，使用许多填充类将更容易，甚至不必创建css文件。

另一个tailwindcss重要特性是，你可以使用类设置hover、active和focus状态。这是Bootstrap从未有过的特性

用法

官方文档

create-react-app下tailwindcss调研和开发