# Lost trying to get prettier-plugin-tailwindcss working

**URL:** https://discourse.roots.io/t/lost-trying-to-get-prettier-plugin-tailwindcss-working/24118
**Category:** sage
**Tags:** sage10
**Created:** 2022-10-22T04:10:12Z
**Posts:** 4

## Post 1 by @Liam — 2022-10-22T04:10:12Z

I’m new to Sage 10 so forgive me If I am missing something glaring.

I cannot seem to get [prettier for tailwindcss](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) working.

I have installed the plugins:

```
npm install -D prettier prettier-plugin-tailwindcss
```

I have updated my tailwind.config.cjs

```
plugins: [
  require("prettier-plugin-tailwindcss"),
  require("@tailwindcss/aspect-ratio"),
],
```

`bud development` compiles without error but classes are not getting sorted.

I have tried to add directives for bud.config.mjs but I really don’t know what I am doing.

Can anyone share some insight on what I should be looking for?

Thank you

---

## Post 2 by @Log1x — 2022-10-22T14:48:23Z

`prettier-plugin-tailwindcss` isn’t a tailwind plugin so it shouldn’t be in your tailwind config.

Do you have prettier setup in your IDE/editor? For something like tailwind, I think it’d be ideal to format your files on save.

[Sorting Tailwind CSS Classes Automatically with Prettier - YouTube](https://www.youtube.com/watch?v=_CntOc4hBcg) is an official screencast from Tailwind Labs that might help you get started.

**EDIT** : Unfortunately I can’t get `prettier-plugin-tailwindcss` working properly with Blade files. It works great for css/javascript, though.

I think the fix for getting it to work with Blade would require using a Prettier Blade formatting plugin and I personally don’t want to do that.

[Headwind - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) has served me well but looks to be abandoned. I’m still going to use Headwind for now but the Prettier plugin would be ideal at some point.

---

## Post 3 by @chrillep — 2023-10-12T13:21:15Z

[@shufo/prettier-plugin-blade - npm](https://www.npmjs.com/package/@shufo/prettier-plugin-blade) fixes the blade part. :slight_smile:  
However i haven’t gotten it to work with bud. Eg. yarn bud format, build or dev.  
Bu thats proboably cause im missing something and i couldnt find any docs on [https://www.npmjs.com/package/@roots/bud-prettier](https://www.npmjs.com/package/@roots/bud-prettier) :frowning:

ex.  
.prettierrc.json

```
{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@shufo/prettier-plugin-blade"
  ],
  "overrides": [
    {
      "files": ["*.blade.php"],
      "options": {
        "parser": "blade",
        "wrapAttributes": "force-expand-multiline",
        "sortTailwindcssClasses": true,
        "sortHtmlAttributes": "code-guide"
      }
    }
  ]
}
```

sidenote, there is a eslint plugin but havent tried it with blade.  
[https://www.npmjs.com/package/eslint-plugin-tailwindcss](https://www.npmjs.com/package/eslint-plugin-tailwindcss)

---

## Post 4 by @mahmoud-alawad — 2023-10-31T15:03:31Z

well i think the problem is with budjs if  
you look in bud-prettier plugin and eslint-bud both use commonJs that’s why you cannot use it because tailwindcss formatter plugin export the plugin in module js and you cannot use require(‘tailwind-formatter’) in prettier.cjs :slight_smile: [https://github.com/roots/bud/blob/f9ae18c7d589f88d95ddf910e5fe77c6834281ea/sources/%40roots/bud-prettier/src/bud/commands/bud.prettier.command.tsx#L34](https://github.com/roots/bud/blob/f9ae18c7d589f88d95ddf910e5fe77c6834281ea/sources/%40roots/bud-prettier/src/bud/commands/bud.prettier.command.tsx#L34)