如果你工作中涉及前端部分，那你一定和CSS打过交道。大家在开发中应该都用过不少的CSS 框架，例如Bootstrap，Muse UI，Element UI等等。技术领域一直都在追求更快和更好，新框架不断涌现，那到底哪个最好用呢？今天我们来推荐一个超热的开源原子化CSS框架，帮助你开发速度原地起飞，目前在GitHub已超过31K Star，他就是：**Tailwind CSS 。** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7d5b2c7cdb54289b85181127ed32019~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=841&h=105&s=10278&e=png&a=1&b=111827)[]() # Tailwind CSS 是什么? Tailwind 是一个原子化 CSS 框架，这句话应该怎么理解呢？之前的CSS框架，一般都是通过包装，为用户提供一系列的组件，比如button，Icon, layout等。但是 Tailwind 并不提供组件，而是基于Utility构建CSS，希望提供一套完整的，最小单位的工具类CSS，这样就可以给开发人员最大的自由度，由他们去组合使用这些内容。而这就是它原子化的理念。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31db52e0bb5f4e96aed429a37579e090~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=720&s=194678&e=jpg&b=0c192b)[]() 简单来做一个对比，更容易让你明白这里面的差别： ```

点击

``` # 为什么用Tailwind CSS - 只写HTML，不写CSS：对于一个css没那么熟练的人，这种感觉真的太好，有一种打破次元壁的感觉。这让页面开发有了空前的一致性，无需再在HTML和CSS间来回切换了。 - 可以不用起类名了：这是tailwind官方说的，其实很有道理。 - 避免CSS膨胀：因为tailwind可以高效重用，所以就避免了CSS一直在膨胀。 - 可定制化：当然并不是CSS高手被抛弃了，如果你想定制，那么tailwind.config.ts可以满足你。 - 容易集成：React、Vue 和 Angular这些通通都没有问题，目前tailwind可以和所有这些框架集成。另外tailwind还对响应式布局和无障碍有着良好的支持，这也是非常的特点。 # 使用 Tailwind CSS 首先你可以在开始前先到 playground里试一试，先恋爱再结婚，稳稳的幸福。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc247e49d2741819bd90ac4c6aee427~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1908&h=848&s=353277&e=png&b=ffffff)[]() 安装tailwind CSS 的方法很多，包括官方的CLI工具，PostCSS，CND，另外各种开发框架也会有自己的提供方式。我们就使用官方提供的CLI工具： ``` npm install -D tailwindcss npx tailwindcss init ``` 这样会生成一个 **tailwind.config.js** ，修改文件内容： ``` /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` 然后我们src下建一个 input.css，并添加 **Tailwind directives** ``` @tailwind base; @tailwind components; @tailwind utilities; ``` 启动 **Tailwind CLI** 的监听构建器，他会持续的去帮你构建CSS ``` npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ``` 接下来就在HTML中使用tailwind了，把编译后的文件加到header即可 ```

Hello world!

``` 然后就自己来试试玩吧，只要你稍微有点基础，肯定马上就觉得特别上瘾的。另外这里建议把tailwind的vscode插件装上。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01ea9d67a35e4bbab5ab51d7b58ff040~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1552&h=875&s=242666&e=png&b=1c1c1c)[]() 如果有不知道怎么用的，可以去文档里查一下。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f0a9a0912474f8b9f1e02e5421580f5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1919&h=848&s=259714&e=png&b=fefefe)[]() # 项目信息 - 项目名称：tailwindcss - GitHub 链接：https://github.com/tailwindlabs/tailwindcss - Star 数：75K+