“做好眼前的事，才能创造出最有希望的生活和最具有价值的的人生。所有的一切都只发生于当下，过好每一天，才能找到真正的力量，发现通往幸福之路的入口，不会把握当下的人，即使有多宏伟的目标也只是夸夸其谈，如沙漠中的海市蜃楼，无法企及” ——出自《稻盛和夫给年轻人的忠告》
前言
不知在工作开发过程中还是在学习过程中，前端的开发工作总有一个跨不过去的鸿沟，那就是 CSS。
个人觉得 CSS并不很难，也不麻烦，就是有点敏锁。很多想入门前端的小伙伴也可能就 "挂" 在了CSS上了。尤其是做后端的大佬，发现改这个地方那个地方又不行了，总之是拆了东墙补西墙。好不容易实现了效果，结果没两天产品经理又要让改页面
还有各种适配，响应式自适应等等。总之是挺让人抓狂的。
今天就给大家介绍一款CSS的神器框架——Tailwind CSS
"Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。" ——出自Tailwind CSS官网
它集成了很多我们平时用的样式和功能，我们在使用的时候只需要引入在 class 上添加对应的类就好，非常的方便。
安装&初始化
关于安装 Tailwindcss 有很多种安装方式，也可以和不同的框架进行集成，这里以 vue3(vite) 为例介绍。
1、创建一个vite 工程，具体用法参考 vite 官网
npx create-vite-app my-project cd my-project npm install
2、初始化 Tailwind CSS
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3、创建您的配置文件，(这里会同时生成tailwind.config.js 和 postcss.config.js 文件)
npx tailwindcss init -p
接着会在项目根目录下生成两个文件：
// tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
我们也不需要额外的配置这两个文件，使用默认的就好。
经过上面的安装和初始化步骤之后，我们就可以真正的使用Tailwind CSS来开发我们的项目了
引入并使用
首先我们需要先创建一个 css文件如：src/styles/index.css 并且 引入相关的功能
/*! @import */ @tailwind base; @tailwind components; @tailwind utilities;
接着就引入创建好的 index.css在 main.js 或者 main.ts 中引入刚刚创建好的css文件
import { createApp } from 'vue' import App from './App.vue' import './stylesindex.css' createApp(App).mount('#app')
到这里我们就算是把 Tailwind CSS 安装并且引入成功了。剩下的就是无脑使用就好。如我们在一个文件中创建如下：
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
上面中的 class 中的类都是需要我创建，这都是Tailwind CSS自己带的。我们只需要使用。这样一个简单的功能就算做好了，看一样效果
如果我们按平时的写法做这样的功能，可能得写好多好多 css 还不一定能出来效果。如下：
.chat-notification { display: flex; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; } .chat-notification-content { margin-left: 1.5rem; padding-top: 0.25rem; } .chat-notification-title { color: #1a202c; font-size: 1.25rem; line-height: 1.25; } .chat-notification-message { color: #718096; font-size: 1rem; line-height: 1.5; }
可以看到代码量是少了很多很多。
其实 Tailwind CSS 的强大功能远不止如此，还有很多强大好用的功能如：
- 强大的响应式设计
- 元素的hover 、focus 和其它状态的元素
- 深色模式
- ……
这里由于篇幅的原因我们不展开介绍了。大家可以去官网 自己行查看更多的功能。
