vscode-blade-formatter

vscode-blade-formatter copied to clipboard

Hey there.

In my tailwind.config.js I have custom screens like

screens: {
    sm: "0",
    md: "834px",
    lg: "1024px",
    xl: "1200px",
    xxl: "1440px",
    xxxl: "1900px",
}

With the settings "sortTailwindcssClasses: true" it puts the xxxl breakpoint to the start of the class list:

Before:

<div class="col-start-2 col-end-11 md:col-end-12 xl:col-end-10 xxxl:col-end-8">
    <h1 class="text-white">Random Stuff</h1>
</div>

After:

<div class="xxxl:col-end-8 col-start-2 col-end-11 md:col-end-12 xl:col-end-10">
    <h1 class="text-white">Random Stuff</h1>
</div>

It seems like it works only with the default screens (sm, md, lg, xl, 2xl)

How to fix that? :)

Hi @nikolai-nikolajevic This extension's TailwindCSS sorting feature algorithm is following official prettier-plugin-tailwindcss.

It might related to this? https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/89

Is this working as you expect?

 $  cat tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      sm: '0',
      md: '834px',
      lg: '1024px',
      xl: '1200px',
      xxl: '1440px',
      xxxl: '1900px',
      ...defaultTheme.screens,
    },
  },
}

 $  yarn run prettier test.html
<div class="col-start-2 col-end-11 md:col-end-12 xl:col-end-10 xxxl:col-end-8">
  <h1 class="text-white">Random Stuff</h1>
</div>

hm yes, but…

it works when Im using prettier + prettier-plugin-tailwindcss as cli and only when I rename the file to .html

But I would like to use it with your blade formatter automatically

hmm, it seems tailwind.config.js is not respected in this extension.

I think it can fix by respect the tailwind.config.js when it is in the project root.

I'll look into it.

Fixed at https://github.com/shufo/vscode-blade-formatter/releases/tag/v0.18.0