tailwind是一种流行的公用事业优先型CSS框架，近年来已获得了大量的吸引力。这是一个高度可自定义且易于使用的框架，可以帮助开发人员简化其工作流程，并以较少的代码创建视觉吸引人的网站。
使用尾风的最大优势之一就是它简化了开发过程。该框架提供了一组预定义的类，开发人员可以使用这些类型来设计其HTML元素。这无需为网站上的每个元素编写自定义CSS，从而节省了大量的时间和精力。
有了如此大量的预定义类，有时很难阅读和理解特定元素的样式。
让我们看这个示例（取自Flowbite）：
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>
这是一个使用Tailwind风格的复选框。这是包含大量信息的一行代码。目前尚不清楚复选框的样式。
这就是为什么我开发了一个ESLINT插件，该插件可以帮助开发人员更好地了解其代码中如何使用尾风类的原因。该插件称为@kalimahapps/eslint-plugin-tailwind，可在NPM上找到。目前，它有两个规则。
尾风杀
使用此规则，您可以强制执行一旦超过一定数量的字符，就可以将尾风类写在多行上。这使阅读和理解该元素的样式更容易。
让我们看看启用此规则的上述示例的外观：
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div
class="w-11
h-6
bg-gray-200
peer-focus:outline-none
peer-focus:ring-4
peer-focus:ring-blue-300
dark:peer-focus:ring-blue-800
rounded-full
peer
dark:bg-gray-700
peer-checked:after:translate-x-full
peer-checked:after:border-white
after:content-['']
after:absolute
after:top-[2px]
after:left-[2px]
after:bg-white
after:border-gray-300
after:border
after:rounded-full
after:h-5
after:w-5
after:transition-all
dark:border-gray-600
peer-checked:bg-blue-600"
/>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>
，如您所见，这些类现在是在多行上写的，并且从第一目节看，您可以识别哪些类用于样式元素。
尾风
这是插件中包含的另一个规则。它可以帮助开发人员以一致的方式对尾风班进行分类。虽然Tailwind提供了一个prettier plugin来对课程进行分类，但我发现它不直觉，而且不是很有用。基础层中的类将首先排序，然后是组件层中的类，最后是实用程序层中的类。
但是，该规则按字母顺序排列，但分组为组。例如，将bg-sky-500和dark:bg-sky-100分组在一起是有道理的。这是因为它们都是背景颜色。 text-sky-500和dark:text-sky-100也是如此。
让我们看看启用此规则的上述示例的外观：
<label class="cursor-pointer inline-flex items-center relative">
<input type="checkbox" value="" class="peer sr-only">
<div
class="bg-gray-200
after:bg-white
dark:bg-gray-700
h-6
after:h-5
peer
dark:peer-focus:ring-blue-800
peer-checked:after:border-white
peer-checked:after:translate-x-full
peer-checked:bg-blue-600
peer-focus:outline-none
peer-focus:ring-4
peer-focus:ring-blue-300
rounded-full
after:rounded-full
w-11
after:w-5
after:absolute
after:border
after:border-gray-300
after:content-['']
after:left-[2px]
after:top-[2px]
after:transition-all
dark:border-gray-600"
/>
<span class="font-medium ml-3 text-gray-900 dark:text-gray-300 text-sm">Toggle me</span>
</label>
我认为这是编写尾风类的一种更可读和可理解的方式。
安装和用法
当前，该软件包仅适用于VUE项目。要在您的项目结帐式读书文件中安装和使用此插件：
KalimahApps Eslint Tailwind Plugin
Provide eslint rules for tailwindcss
规则
-
@kalimahapps/tailwind/tailwind-sort：按字母顺序排列的尾风类别 -
@kalimahapps/tailwind/tailwind-multiline：如果超过最大线长度（默认值：80）
g-emoji>安装
PNPM
pnpm添加eslint @kalimahapps/eslint-plugin-tailwind -d
npm
npm安装eslint @kalimahapps/eslint-plugin-tailwind -d
用法
将其添加到您的.eslintrc.js文件
您可以通过将其添加到.eslintrc.js文件
启用自动格式化添加到您的.vscode/settings.json文件
{
“ prettier.yable” ： false
“ editor.formatonsave” ： false ，
“ eslint.codeaction.showdocumentation” ： -
¥连接
Twitter：@kalimahapps