Tailwind CSS安装和构建的正确操作方式

导语

就在前段时间laravel更新了8.0版本，其中有一个新特性是Jetstream是Laravel的新应用程序支架，Jetstream使用Tailwind CSS，您可以在Livewire或Inertia之间进行选择。于是我就开始了tailwindcss研究之旅。

简介

一般的UI中CSS框架都是内建各种预设的组件，比如表单、按钮、菜单、模态框等，当需要通过定制化设计时，组件的高度耦合性则带来很大的弊端。Tailwind并不提供预先设计好的内建组件，而是提供了更为基础的工具类（utility classes），可直接在HTML源码上构建完全定制化的设计。

Tailwind是一个CSS框架的工具集，Tailwind的理念是抽取共用体（Utilities First）。 Tailwind CSS是一个高度可定制的基础层CSS框架，提供了构建定制化所需的构建块，无需重新覆盖内建于框架内中的风格。

特性

1. 响应式 Tailwind CSS的每个工具类都支持响应式布局，使用类似{screen}:的命名前缀以区分响应式类。

2. 组件友好 仅需使用工具类（utility classes）即可，Tailwind从重复模式中提取组件的工具类。

3. 可定制 Tailwind CSS是基于PostCSS开发的，通过JavaScript代码配置。

核心

1. 实用为主（Utility-First） 传统的Web页面设计需手工为HTML元素编写CSS样式，使用Tailwind可以直接在HTML使用预先定