如何使用tailwindcss来管理项目的样式

前言

😕 大家可以看到之前我们项目(比如使用vue全家桶+某个UI库)中打包出来的结果css内容，可以发现，我们在项目中经常使用的那就那么些样式，但是打包出来的最终效果确是像 ☝ 的一样，将有关的和无关的样式都给怼进来了，搞得整个css样式表非常的大。更 🐶 的是如果我们要做响应式的交互效果，我们基本上都得一个个媒体查询都得用起来，并维护一套套的不同的样式表，来确保在对应的屏幕上能够按照既定的目标来展示对应的效果。还有更 🐕 的是作为开发者，还必须想好每个样式的名字，如果按照 css中的BEM命名规范的话，还得去想好每个样式的名称。当然在实际的coding过程中还有其他比较繁琐的事情，让我们从css样式代码管理工作中释放出来！

👉 因此，tailwindcss 官网应运而生，就是为了解决上述提及到的相关问题，以及根据更多的使用业务应用场景来管理项目中的样式！！

什么是tailwindcss?

tailwind css的工作原理就是扫描所有的HTML文件、JavaScript组件以及任何其他模版来获取其中出现的类型，生成对应的样式，然后将它们写入到静态的css文件中，也就是说通过tailwind css所产生的css文件，将不会冗余一行代码，也不会遗漏一行css代码，按需分类对应的样式来展示! 另外，为了确保生成的类中的样式属性不重复定义，tailwind css制定了一整套关于样式的组装的最颗粒度的css单位元素，通过库内部提供的组装样式的逻辑，展现出各个不同的样式组装结果，从而让tailwind css生态内提供样式重复率最低的css结果文件，提供页面的渲染速度！下面就要对这个库进行一个具体的使用与分析！！

理解tailwindcss中的数字

在tailwindcss中的数字，代表着整个tailwindcss的尺寸、间距等基准单位，所有的与尺寸相关的类名，都离不开这个基准的尺寸，可以说，在tailwindcss中所涉及到的尺寸，都与这个基本的数字有所关联(当然，我们可以直接重新定义属于自己的一套尺寸)，在tailwindcss中的尺寸定义见尺寸定义

如何进行响应式编码

在tailwindcss中默认划分了sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)5个默认屏幕断点，我们可通过在类名前缀追加断点描述符，可实现针对该min-width断点下的样式外观控制，而一般的响应式编码要求，则需要以移动的优先，然后慢慢向上尺寸进行对应控制，而不是以PC为准，再慢慢向移动来靠拢，这个也是自己之前针对响应式处理的一个错误想法，具体可见官网移动优先的设计

如何使用tailwindcss?

👇 将简单介绍关于如何使用这个tailwind csss

1、安装Tailwind Css

1 2	npm install -D tailwindcss npx tailwindcss init

🌠 创建对应的tailwind.config.js，作为tailwind css的统一的配置文件入口

2、配置模版路径以及其他配置

module.exports = {
  // 配置来源样式名称的文件路径
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {}
  },
  plugins: []
}

🌠 上面这个tailwind.config.js是最基本的样式配置文件，代表将完全使用官方配置

3、将Tailwind指令添加到自己的css中

将tailwind css每个层的@tailwind指令添加到自己的主css文件中

1
2
3

@tailwind base;
@tailwind component;
@tailwind utilities;

在引入了tailwind css的相关指令将各个模块给引入了之后，再来怼上自己所自定义的样式， 👉 这里将会自动注入tailwind css中根据配置文件(tailwind.config.js)所配置的相关样式代码，这样子才能够做到将所有的样式根据需要都定义到统一的一个css文件中！！！

4、启动tailwind CLI进行构建

手动挡的方式，可以将相关的样式给组装整理到统一一个文件中

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

5、在对应的HTML中使用tailwind

将 ☝ 第 4⃣ 所产生的结果css文件，link到我们的html文件中，就可以展示我们所需要展示的效果！！！

tailwindcss能帮助我们解决什么问题?

在开始回答这个问题之前，先来看这边针对tailwind css的一个使用过程整理的对应的一张图：

从上面我们可以简单地分析出关于tailwind css主要是通过基础的配置(包括有内容、主题、屏幕、颜色、间距、插件、预设)等作为基本单元，然后通过组合两个或者两个以上的基本单元，形成一个新的单元，将这个单元用来作为实际的className，实现根据需要动态生成对应的样式表数据，这里的组装规则见：官方配置，👇 是对应的一个组装的过程：

😖 因此，这边也整理了关于tailwind css使用过程需要注意的几个点：

当我们需要在tailwindcss的基础上追加我们的自定义样式时，必须在theme.extends节点对象下新增对应的属性，而不是直接在theme下直接写我们所想要追加的属性，当然，如果我们执意想要在这个theme节点下追加我们的属性的话，则必须要调用tailwindcss的API(通过插件语法函数的方式)来获取原属性，并实现自定义追加的目的，如下所示：

const plugin = require('tailwindcss/plugin');
module.exports = {
  theme: {
    extends: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    }
  },
  plugins: plugin({addBase, theme}){
    addBase({
      'h1': theme('fontSize.2xl')
    })
  }
}