Lost trying to get prettier-plugin-tailwindcss working

sage
1

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

I cannot seem to get prettier for tailwindcss 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

2

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 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 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.

3

@shufo/prettier-plugin-blade - npm 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 :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

4

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