在安装和构建TailwindCSS之间进行选择的正确方法。于是开始了tailwindcss的研究之旅。介绍一般UI中的CSS框架都是由各种预设的组件构建而成的，比如表单、按钮、菜单、模态框等，当需要定制化设计时，组件的高耦合带来了很大的劣势。Tailwind不提供预先设计的内置组件，而是提供更基础的实用类（utilityclasses），可以直接在HTML源代码上构建完全定制化的设计。Tailwind是一个CSS框架的工具集，Tailwind的思想是提取联合（UtilitiesFirst）。TailwindCSS是一个高度可定制的基础层CSS框架，它提供构建自定义所需的构建块，而无需覆盖框架中内置的样式。特性ResponsiveTailwindCSS的每个工具类都支持响应式布局，使用{screen}:这样的命名前缀来区分响应式类。组件友好只需要使用实用类，Tailwind从重复的模式中提取组件实用类。可定制的TailwindCSS基于PostCSS开发，通过JavaScript代码配置。核心实用程序优先（Utility-First）传统的网页设计需要手动为HTML元素编写CSS样式。使用Tailwind，你可以直接使用HTML中预定义的类名来设置元素的样式。响应式设计（ResponsiveDesign）Tailwind中的每个工具类都可以有条件地应用于不同的断点。默认按照常见的移动设备分辨率划分4个断点，对应4个不同的断点。媒体查询。使用CDN安装注意：在使用CDN构建之前，请注意如果没有安装Tailwind集成到您的构建过程中，许多使TailwindCSS强大的功能不可用。你不能自定义Tailwind的默认主题，你不能使用任何指令，如@apply、@variants等。你不能启用group-hover等功能你不能安装第三方插件你不能动摇未使用的样式以获得最大在Tailwind之外，你真的应该通过npm安装它。使用npm安装使用npm安装TailwindCSS，需要在电脑线上安装node.js环境。如何安装node这里就不说了，参考本博客之前的文章。初始化npm配置文件使用命令初始化package.json配置文件npminit回车直到完成（大约10次）。或者有一个更简单的方法，应该写在前面吗？(⊙o⊙)…npminit-y初始化package.json配置文件。安装tailwindcss扩展包npminstalltailwindcss这里我们可以看到安装了1.9.6版本。安装postcss-cli和autoprefixer扩展包npminstallpostcss-cliautoprefixer将Tailwind添加到CSS使用@tailwind指令将Tailwind的基础、组件和实用样式注入到你的CSS中：在项目目录中新建一个src目录，新建一个样式.css文件，包含以下内容。@tailwindbase;@tailwindcomponents;@tailwindutilities;cssbuild修改package.json文件脚本如下："scripts":{"tailwind":"tailwindcssbuildsrc/styles.css-opublic/styles.css"}，在项目目录下创建公用文件夹。然后运行命令npmruntailwind完成构建。这时我们发现public文件夹下多了styles.css文件，在项目中引用它们进行测试。tailwindcss测试
