这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

什么是Tailwind CSS?

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

无需离开您的HTML，即可快速建立现代网站。

本人已体验过，开发体验非常完美~🤹‍♂️

安装步骤

vanilla即是纯HTML,CSS,JavaScript的项目。

npm init

npm install -D tailwindcss postcss-cli autoprefixer

npx tailwind init -p 这样我们的根目录下就生成这两个文件啦~

在根目录下创建css文件夹，然后在文件夹里创建style.css文件。
在style.css文件里载入核心的三大部件：

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

此时你的文件可能会有波浪线提醒，这是没有关系的。

你可能要问了postcss是个啥?大家可以参考这篇文章:
postcss是个什么鬼东西？

我们在package.json文件下新增一个script

"watch": "postcss css/style.css -o dist/style.css --watch"

执行npm run watch就会将css文件夹下的style.css输出到dist文件夹下的style.css

然后我们就可以使用tailwindcss啦，在dist目录下新建index.html然后引入dist目录下的style.css，最终文件目录就是这样:

HTML代码：

<h1 class="text-center text-3xl text-red-600 bg-blue-400">一起来学tailwindcss</h1>

不用写样式，我们看看页面输出：怎么样，非常棒吧，这样我们就不用自己写css了，极大地提升了生产力！当然你想自己写样式并且使用预处理器也是可以的，具体使用细节，大家可以参考官方文档！
tailwindcss官方文档

现在我们已经可以使用tailwindcss了，但是对生产环境并不友好，因为我们可以看到style.css文件中有近19万行代码。我们没有用到的代码也会被打包进来，这时候还需要做点配置针对生产环境：

"build": "cross-env NODE_ENV=production postcss css/style.css -o dist/style.css" 再执行npm run build 我们打开style.css会发现打包后的代码只有600多行啦~

⚽本文介绍了当红框架的配置过程，让你快速开始上手TailwindCSS~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript