公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css，但是组长要求了，我就照做,于是开始马不停蹄的学习起来tailwindcss了。

对于tailwindcss一开始我的了解只停留在知道名字，现在项目需要，我便开始查询官网文档，学习起来。用了一段时间后，哇，这玩意真丝滑。

现将tailwindcss的总结整理如下：

Tailwind CSS 有什么优点？

为什么要使用tailwindcss，人家肯定是有优点。我们才使用的嘛。优点如下：

可定制化程度极高。

你可以随心所欲写出自己的样式。想怎么折腾怎么折腾。

如果使用 css，你如果想改变一个按钮的样式，就会比较困难。你得定义class名，通过自己的样式覆盖掉 css 自带的样式。如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。但是这个问题在 Tailwind CSS 完全不存在。Tailwind CSS 没有自以为是的封装任何样式给你。

不需要在写 css。

使用 Tailwind CSS，基本可以不用再写 css。所有的效果都可以通过 class 名来完成。我用 Tailwind CSS 写了几个页面，到目前为止，还没有写过一行 css。

不需要再为 class 取个什么名字而苦恼。

对于经常手写 css 的程序员来说，最大的噩梦可能就是怎么给 class 取名了。尤其是在同一个区块里面，区块名称，子元素名称，等等，一个页面动辄几十个几百个类名。非常痛苦。而这其中，真正能复用的 class 可能就个别几个。

使用 Tailwind CSS 完全不用为取名字烦恼，因为所有的 css 属性都被框架语义化封装好了。只需要在 class 里面引用就好。

响应式设计

Tailwind CSS 遵循移动优先的设计模式。断点系统很灵活。也是目前所有 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 复制代码

<img class="w-16 md:w-32 lg:w-48" src="...">

这么看起来是不是超级方便。

一套专业的 UI 属性值

Tailwind CSS 虽然没有封装任何 UI，但是他默认提供的一些属性值都是很专业的。

说了这么多tailwindcss的好处，接下来谈谈tailwindcss如何使用吧

tailwindcss的安装

npm install -D tailwindcss

创建tailwind.config.js文件并进行如下配置

css 复制代码

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    // "./nuxt.config.{js,ts}",
    "./app.vue",
    "./error.vue",
    "./node_modules/@mdpi-ui/design-system/**/*.js",
  ],
  presets: [require("@mdpi-ui/design-system/tailwind.config")],
  theme: {
    fontFamily: {
      sans: ['"Suisse Int\'l"', ...defaultTheme.fontFamily.sans],
    },
    extend: {
      colors: {
        gray: {
          100:'#f3f4f6',
          200:'#e5e7eb'
        },
        slate: {
          300:'#cbd5e1',
          400:'#94a3b8',
          500:'#64748b',
          700:'#334155',
          800:'#1e293b',
        }
      },
    },
  },
  plugins: [],
};

此处配置结合了一些项目中的需要，如果不需要的代码可按需求删除。

注意

TailwindCSS并不会生成一个全量的样式包，而是根据具体使用到的语法生成对应的样式代码，这样可以确保打包产生的样式包是最小的。

创建main.css文件并进行如下配置

less 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

项目中使用的是nuxt，以下举例以nuxt3为准，在nuxt.config.ts进行配置。

vbnet 复制代码

modules: ['@nuxtjs/tailwindcss'],

开始使用

经过以上的配置，我们就可以丝滑的使用tailwindcss啦。

xml 复制代码

<template>
    <div class="w-64 h-64 bg-black">
    </div>
</template>

如上语法，你将在页面看到一个正方形的黑色盒子

@apply

为什么把@apply单独拿出来进行说明呢，主要是因为我们在开发过程中会用到一些重复的样式，

css 复制代码

<div class="p-2 text-gray-900 font-semibold">111</div>
<div class="p-2 text-gray-900 font-semibold">222</div>
<div class="p-2 text-gray-900 font-semibold">333</div>
<div class="p-2 text-gray-900 font-semibold">444</div>

以上代码重复的样式写了四遍，也太繁琐了吧，不必慌张，tailwindcss给我们提供了@apply，可将以上代码进行简化。

less 复制代码

<div class="nav">111</div>
<div class="nav">222</div>
<div class="nav">333</div>
<div class="nav">444</div>

.nav {
  @apply p-2 text-gray-900 font-semibold;
}

这样就可以实现相同的效果了，真是个神奇的东西。

tailwindcss的学习还在继续，大家有什么知识和好的方法可留言一起探讨。

tailwindcss书写前端样式

Tailwind CSS 有什么优点？

可定制化程度极高。

不需要在写 css。

不需要再为 class 取个什么名字而苦恼。

响应式设计

一套专业的 UI 属性值

tailwindcss的安装

开始使用

@apply