prettier-plugin-tailwindcss配置指南：自定义属性和函数调用

想要让 Tailwind CSS 类自动排序更加强大灵活吗？✨ 今天我将分享 prettier-plugin-tailwindcss 的高级配置技巧，教你如何自定义属性和函数调用，让代码格式化达到完美境界！

【免费下载链接】prettier-plugin-tailwindcss A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. 项目地址: https://gitcode.com/gh_mirrors/pr/prettier-plugin-tailwindcss

prettier-plugin-tailwindcss 是一个专为 Tailwind CSS v3.0+ 设计的 Prettier 插件，它能自动按照官方推荐的类顺序来整理你的 CSS 类。这不仅让代码更整洁，还能提升开发效率。

🎯 自定义属性排序配置

默认情况下，插件会自动排序 class 属性以及各种框架的等价属性，如 className、:class、[ngClass] 和 Tailwind 的 @apply 指令。但你可以通过 tailwindAttributes 选项来扩展支持更多属性。

基础属性配置方法

在 Prettier 配置文件中添加 tailwindAttributes 选项：

{
  "tailwindAttributes": ["myClassList"]
}

配置后，插件会识别并排序 myClassList 属性中的所有类：

function MyButton({ children }) {
  return (
    <button myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white">
      {children}
    </button>
  );
}

高级正则表达式匹配

更强大的是，你可以使用正则表达式来匹配多个属性。只需将模式用斜杠包围：

{
  "tailwindAttributes": ["myClassList", "/data-.*/"]
}

这个配置会排序 myClassList 属性以及所有以 data- 开头的属性：

function MyButton({ children }) {
  return (
    <button
      myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white"
      data-theme="dark:bg-gray-800 bg-white"
      data-classes="flex items-center"
    >
      {children}
    </button>
  );
}

🚀 函数调用排序技巧

除了属性排序，插件还能排序函数调用中的类字符串。这对于使用 clsx、cva 等工具库特别有用！

基础函数配置

使用 tailwindFunctions 选项来指定需要排序的函数名：

{
  "tailwindFunctions": ["clsx"]
}

配置后，clsx() 函数调用中的类会自动排序：

import clsx from 'clsx'

function MyButton({ isHovering, children }) {
  let classes = clsx(
    'rounded bg-blue-500 px-4 py-2 text-base text-white',
    {
      'bg-blue-700 text-gray-100': isHovering,
    },
  )

  return (
    <button className={classes}>
      {children}
    </button>
  )
}

模板字面量排序

更酷的是，插件还能排序带标签的模板字面量：

{
  "tailwindFunctions": ["tw"]
}

这个配置会让所有用 tw 标签的模板字面量自动排序：

import { View, Text } from 'react-native'
import tw from 'twrnc'

function MyScreen() {
  return (
    <View style={tw`bg-white p-4 dark:bg-black`}>
      <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>
    </View>
  )
}

⚙️ 高级配置选项

保留空白字符

默认情况下，插件会移除类之间的不必要空白。如果你需要保留空白，可以使用 tailwindPreserveWhitespace 选项：

{
  "tailwindPreserveWhitespace": true
}

保留重复类

在某些模板语言中，移除重复类可能引起问题。你可以禁用此行为：

{
  "tailwindPreserveDuplicates": true
}

💡 实用配置建议

1. 渐进式配置：先从基础配置开始，逐步添加自定义属性
2. 正则表达式优先：使用正则表达式来匹配多个相关属性
3. 测试验证：每次配置变更后，运行测试确保功能正常

通过合理配置 tailwindAttributes 和 tailwindFunctions 选项，你可以让 prettier-plugin-tailwindcss 更好地适应你的项目需求，打造完美的开发体验！🎉

记住，好的配置能让你的代码更加整洁，开发更加高效。开始自定义你的 prettier-plugin-tailwindcss 配置，享受自动排序带来的便利吧！🚀

【免费下载链接】prettier-plugin-tailwindcss A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. 项目地址: https://gitcode.com/gh_mirrors/pr/prettier-plugin-tailwindcss