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

一、介绍

1、官方文档

https://tailwind.docs.73zls.com/

2、官方示例

​

 二、准备工作

1、安装依赖包

npm install tailwindcss@latest postcss@latest autoprefixer@latest

注：更多安装相关内容请看这里https://tailwind.docs.73zls.com/docs/installation

2、示例版本 

"tailwindcss": "^3.4.17",

三、使用步骤 -

以作为 PostCSS 插件来添加 Tailwind为例子

1、根目录 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

2、根目录 tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

3、包含 Tailwind 到您的 CSS 中

如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4、生成您的 CSS

 module.exports = {
   purge: [
     './src/**/*.html',
     './src/**/*.js',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

注：

• 更多配置请看这里 https://tailwind.docs.73zls.com/docs/installation#post-css-tailwind-css
• 不依赖 PostCSS 使用 Tailwind请看这里 https://tailwind.docs.73zls.com/docs/installation#post-css-tailwind-1

5、Sass

当使用Sass的 Tailwind 时，使用！重要与@apply需要您使用插值来正确编译。

.alert {
  @apply bg-red-500 #{!important};
}

注：更多配置请看这里https://tailwind.docs.73zls.com/docs/using-with-preprocessors#sass

四、示例

<div class="flex flex-row ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

欢迎关注VX公众号：前端小知识营地