【插件】美化html标签的class 属性上的 tailwindcss 类；Prettier-plugin-tailwindcss

1. 引言

  <div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
    <!-- 图片 -->
    <img 
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" 
      alt="示例图片"
      class="w-full h-48 object-cover"
    >
    
    <!-- 内容 -->
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-800 mb-2">简单卡片标题</h2>
      <p class="text-gray-600 mb-4">这是一个使用Tailwind CSS构建的简单卡片示例。</p>
      
      <!-- 按钮 -->
      <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">
        点击按钮
      </button>
    </div>
  </div>

比如，这段代码，使用的是 taulwindcss 原子化工具 ，有时候我们一个 标签上可能会用到很多的 类名称，就会导致很长，如若顺序不规范，那么看起来就会很费劲，这个时候 prettier-plugin-tailwindcss 出世。

2. 使用

2.1 安装

需要确保项目，已经安装了 prettier，如若没安装的话，还需要安装一下

npm install -D prettier prettier-plugin-tailwindcss

2.2 修改 prettier 配置文件

需要在配置文件里面加上这行代码，然后再 vue 文件里面 按下 ctrl + s 就会对 class 进行顺序的格式化

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

参考链接

• prettier-plugin-tailwindcss npm 地址