{
"title": "Tailwind CSS初尝试",
"tags": [
"post",
"CSS",
"前端"
],
"sources": [
"xlog"
],
"external_urls": [
"https://magren.xlog.app/tailwind-css"
],
"date_published": "2023-02-15T02:14:21.000Z",
"content": "> “有了这个玩意，我可能不用引入css预处理语言，毕竟我可能不写css。” —— 我自己说的\n\n\n## Atomic CSS（原子 CSS）\n在知道Tailwind CSS之前，得先知道一个概念，就是原子 CSS，它的概念解释起来十分简单，**即所有 CSS 类都有一个唯一的 CSS 规则。** \n\n这样写的方法有一些好处\n+ **不会出现样式冲突**，因为每个类都是唯一的，不会有重复的类名。 \n+ 同时移动html元素的时候，也不会出现样式丢失的情况。 \n+ 删除新特性的时候，也能够确保其样式同时被删除。\n\n```css\n/* 原子 CSS */\n.bw-2x {\n border-width: 2px;\n}\n.bss {\n border-style: solid;\n}\n.sans {\n font-style: sans-serif;\n}\n.p-1x {\n padding: 10px;\n}\n```\n在使用这种写法之前，我们需要先定义好一些常用的类名，比如上面的`.bw-2x`，`.bss`，`.sans`，`.p-1x`，然后才可以进行开发，如果这一套样式是由别人写好的，我们也不得不去学习这一套样式，并且学习其类名的约定，这样就会增加我们的学习成本。甚至我们需要的样式是这一套样式中没有的，那么我们就需要自己去写。\n\n## Tailwind CSS\n> ~~神说：要有样式，于是有了Tailwind CSS~~ \n> 神说：要有光，于是有了光。\n\n[Tailwind CSS](https://tailwindcss.com/)提供了一些公用的命名约定。通过一个[配置文件](https://tailwindcss.com/docs/configuration)，你可以为你的网站生成一套专属的实用工具 CSS。它是一套完整的设计系统，需要能提供开箱即用的功能，满足 80% 的业务场景；同时需要支持良好的扩展机制，满足另外 20% 的业务场景。 \n\n#### 自定义配置\nTailwind CSS提供了一些配置项，可以在`tailwind.config.js`中进行配置。当一个项目的UI设计已经有了一套明确的规范（字体大小、主题色、按钮大小等），我们可以通过配置文件来生成一套符合规范的CSS类名。 \n```javascript\n// tailwind.config.js 官网实例配置\nmodule.exports = {\n content: ['./src/**/*.{html,js}'],\n theme: {\n colors: {\n 'blue': '##1fb6ff',\n 'purple': '##7e5bef',\n 'pink': '##ff49db',\n 'orange': '##ff7849',\n 'green': '##13ce66',\n 'yellow': '##ffc82c',\n 'gray-dark': '##273444',\n 'gray': '##8492a6',\n 'gray-light': '##d3dce6',\n },\n fontFamily: {\n sans: ['Graphik', 'sans-serif'],\n serif: ['Merriweather', 'serif'],\n },\n extend: {\n spacing: {\n '8xl': '96rem',\n '9xl': '128rem',\n },\n borderRadius: {\n '4xl': '2rem',\n }\n }\n },\n}\n```\n#### 支持任意值\nTailwind CSS提供了一套类名对应的样式，我们可以通过`w-1/2`来设置宽度为50%，也可以通过`w-1/3`来设置宽度为33.3333%，但是总有样式是框架没有提供的。 \n\nTailwind CSS就提供了一种任意值的类名规则，如果我们需要设置宽度为50px，可以通过加入`w-[50px]`的类名来实现，这种方式对其他的CSS属性任意值也是同样适用的。\n\n#### 响应式设计\nTailwind 中的每个功能类都可以有条件的应用于不同的断点（有点像Bootstrap呢），这使得可以轻松的构建复杂的响应式界面而不用离开 HTML。 默认的情况下 Tailwind 会为你生成以下几个断点：\n+ sm\t640px\t@media (min-width: 640px) { ... }\n+ md\t768px\t@media (min-width: 768px) { ... }\n+ lg\t1024px\t@media (min-width: 1024px) { ... }\n+ xl\t1280px\t@media (min-width: 1280px) { ... }\n+ 2xl\t1536px\t@media (min-width: 1536px) { ... }\n\n#### @apply 抽离/复用\n由于需要做响应式，所以一个类名需要根据断点写多种去适应不同的尺寸。这样，一个标签里面难免会存在几十个类名，会影响代码的阅读体验，甚至后续也难以维护以及拓展。Tailwind CSS提供了@apply指令用于将现有的类名内联到自己自定义的css中。\n\n```css\n.my-class {\n @apply h-48 w-full text-lg font-bold text-gray-900;\n}\n```\n\n#### 文件会很大吗？\n对的！因为它需要把所有的CSS属性全部都封装一遍，所以CSS文件巨大。于是Tailwind CSS在构建的过程中引用了`PurgeCSS`，以此找到所有未使用的类名，以确保他们不会一块被打包，所以打包构建不用担心文件会很大。\n\n\n#### 说说缺点\n+ 由于Tailwind CSS是基于类名的，所以在使用的时候，需要对类名有一定的了解，否则就会出现一些不必要的样式。\n+ 标签里边会有大量的类名，会显得丑陋，阅读体验不好，后期维护修改多少有点不便。\n+ 需要搭配UI规范，否则多人开发不好维护。\n\n#### 实际使用\n###### html/css实现\n```html\n<div class=\"chat-notification\">\n <div class=\"chat-notification-logo-wrapper\">\n <img\n class=\"chat-notification-logo\"\n src=\"/img/logo.svg\"\n alt=\"ChitChat Logo\"\n />\n </div>\n <div class=\"chat-notification-content\">\n <h4 class=\"chat-notification-title\">ChitChat</h4>\n <p class=\"chat-notification-message\">You have a new message!</p>\n </div>\n</div>\n\n<style>\n .chat-notification {\n display: flex;\n max-width: 24rem;\n margin: 0 auto;\n padding: 1.5rem;\n border-radius: 0.5rem;\n background-color: ##fff;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n .chat-notification-logo-wrapper {\n flex-shrink: 0;\n }\n .chat-notification-logo {\n height: 3rem;\n width: 3rem;\n }\n .chat-notification-content {\n margin-left: 1.5rem;\n padding-top: 0.25rem;\n }\n .chat-notification-title {\n color: ##1a202c;\n font-size: 1.25rem;\n line-height: 1.25;\n }\n .chat-notification-message {\n color: ##718096;\n font-size: 1rem;\n line-height: 1.5;\n }\n</style>\n```\n###### Tailwind CSS实现\n看起来简单了很多😋\n```html\n<div class=\"max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl\">\n <div class=\"flex-shrink-0\">\n <img class=\"h-12 w-12\" src=\"/img/logo.svg\" alt=\"ChitChat Logo\" />\n </div>\n <div class=\"ml-6 pt-1\">\n <h4 class=\"text-xl text-gray-900 leading-tight\">ChitChat</h4>\n <p class=\"text-base text-gray-600 leading-normal\">\n You have a new message!\n </p>\n </div>\n</div>\n```\n## 最后\n原子化css个人感觉是个值得关注的趋势，目前Twitter、~~facebook~~ Meta等大厂都在使用。\n\n\n\n如果团队是根据一套设计规范去进行设计的话，用Tailwind CSS会非常舒服。同时个人感觉用其写布局非常爽，几个 class 就可以解决问题，不需要再做无意义的命名。😆 \n\n这只是我个人使用的一些想法，如果感兴趣的话我建议亲自使用一下。✍️ \n\n这里也推荐下antfu写的 [Unocss](https://github.com/unocss/unocss) - 具有高性能且极具灵活性的即时原子化 CSS 引擎。\n\n最后希望大家CSS完全理解。💡\n",
"attributes": [
{
"value": "tailwind-css",
"trait_type": "xlog_slug"
}
]
}
