让你开发更舒适的 Tailwind 技巧 _Tailwind

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验
使用 Tailwind css，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。
IDE 设置智能提示扩展

文章插图
Tailwind 智能提示是一款适用于 VSCode 和 JetBrains（如 IDEA 和 Webstorm）的扩展。它提供自动补全功能，便于在 html 元素上编写类，并可访问 Tailwind 配置。若您忘记了定义的颜色名称，它还能帮助您快速选取。
下载链接如下：
VSCode 版本：https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 。
IDEA 和 Webstorm 版本：https://plugins.jetbrains.com/plugin/15260-tailwind-intellisense 。
或者在代码编辑器的扩展市场中搜索即可。
Prettier 插件在给元素编写许多类名时，有时会变得难以管理，难以区分哪些是自定义的，哪些用于响应式布局，以及哪些样式应该为了更好的理解而分组。比如，在编写一堆样式时，突然想起忘记为 flexbox 设置间隙，需要将其复制并粘贴到代码的不同位置。这种情况对我来说需要过多的思考。
为解决此类问题，Tailwind 团队推出了一个 Prettier 插件来为我们整理代码。使用它，只需运行：
npm i -D prettier prettier-plugin-tailwindcss

文章插图
要使其工作，如果您之前没有使用过 prettier ，请安装官方扩展，并配置一些您喜欢的快捷键来格式化文档：
如果你安装了 eslint，可能想将默认格式化程序更改为它。为此，请按 CTRL + Shift + P，选择“使用格式化文档”，然后选择“配置默认格式化程序”，并从列表中选择 prettier 。如果您之前使用了一些 eslint 选项，可以在 Prettier 的官方网站上阅读如何将这些规则与 prettier 集成。
这个插件的排序顺序如下：

Tailwind 中未定义的类名，即用户自定义的类名
Tailwind 中的宽度、弹性布局等其他样式，按其重要性排序
媒体查询和悬停效果

配置我们的项目当刚安装 Tailwind 时，您可能会运行以下命令：
npx tailwindcss init -y这会生成 Tailwind 配置文件。如果正确探索并填写它，它将非常有用！
逆向媒体查询在开始任何 Tailwind 项目之前，首先要做的两件最重要的事情是：
使用逆向媒体查询。
制作响应式网站通常有两种基本方法：移动端优先和桌面端优先：

文章插图
第一种方法首先从制作移动视图开始，然后调整至桌面视图，而另一种则恰好相反。
默认情况下，Tailwind 基于第一种方法，这就是为什么它的所有基本媒体查询都是 min-width 类型的，意味着需要在某个断点以下定义样式，然后使用 md 和其他变体类进行更改。
对我来说，这个决定有些麻烦，因为我习惯于从桌面视图开始制作网站。如果你和我一样，有一个小技巧可以使 Tailwind 按我们想要的方式工作，只需将以下内容添加到配置文件的 theme 中：

screens: {'2xl': {'max': '1535px'},// => @media (max-width: 1535px) { ... }'xl': {'max': '1279px'},// => @media (max-width: 1279px) { ... }'lg': {'max': '1023px'},// => @media (max-width: 1023px) { ... }'md': {'max': '767px'},// => @media (max-width: 767px) { ... }'sm': {'max': '639px'},// => @media (max-width: 639px) { ... }}

完成后，所有断点都将从特定宽度开始工作，我们不需要反向思考了！
使用任意 REM 值你可能已经知道，CSS 中有许多单位用来定义大?。??nbsp;pt、px、cm、em、rem 等。对我来说，这些单位中最有价值的是 rem 。rem 的默认大小是 16px，即 HTML document的默认大小，这意味着当用户在浏览器中更改缩放比例时，我们的document 也会相应放大。
但你可能会问，当需要将所有 Figma 设计转换为这些值并花费大量时间时，如何使用这些值呢？为此，我们可以在主 CSS 文件中这样定义基本字体大?。?