tailwindcss书写前端样式
公司开发了自己的组件库，组件的样式基于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 框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。 按照之前的写法，你可能得这么干
@media only screen and (max-width:1280px) {
.img {
width:196px;
}
}
@media only screen and (max-width: 760px) {
.img {
width:128px;
}
}但是在 Tailwind CSS，一句话就能搞定：
<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文件并进行如下配置
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文件并进行如下配置
@tailwind base;
@tailwind components;
@tailwind utilities;项目中使用的是nuxt，以下举例以nuxt3为准，在nuxt.config.ts进行配置。
modules: ['@nuxtjs/tailwindcss'],开始使用
经过以上的配置，我们就可以丝滑的使用tailwindcss啦。
<template>
<div class="w-64 h-64 bg-black">
</div>
</template>如上语法，你将在页面看到一个正方形的黑色盒子
@apply
为什么把@apply单独拿出来进行说明呢，主要是因为我们在开发过程中会用到一些重复的样式，
<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，可将以上代码进行简化。
<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的学习还在继续，大家有什么知识和好的方法可留言一起探讨。