Prettier i @apply w tailwindcss

Question

Cześć,

Od niedawna zacząłem używać tailwindcss w swoich projektach i napotkałem problem związany z prettierem i dyrektywą @apply w tailwind - zie. Mianowicie kiedy po dyrektywie @apply piszę np. sm:animate-none to prettier daje mi po dwukropku spacje przez co nie mogę użyć tej klasy i wywala mi bląd w konsoli przy kompilacji tailwindcss do css.

Przykład:

przed zapisaniem pliku i sformatowaniem go przez prettier:

.phone-header {
@apply md:hidden
}

po sformatowaniu pliku

.phone-header {
@apply md: hidden
}

 

Czy ktoś z was wie może jaką opcję trzeba ustawić w .prettierrc lub settings.json w vscode, że by prettier nie dodawał mi tej spacji.

Z góry serdecznie dziękuję za pomoc
i Pozdrawiam

Answer 1

Spróbuj użyć pluginu do Prettiera, który bierze pod uwagę syntax Tailwinda.

Comments

Zainstalowałem już dwa przez npm, ale chyba źle je dodaje w .prettierrc bo dalej jest tak samo.

Plik .prettierrc:

{
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "jsxSingleQuote": true,
    "prettierPath": "./node_modules/prettier/index.js",
    "requirePragma": true,
    "resolveGlobalModules": true,
    "trailingComma": "all",
    "vueIndentScriptAndStyle": true,
    "withNodeModules": true,
    "bracesSpacing": false,
    "breakProperty": true,
    "flattenTernaries": true,
    "arrowParens": "always",
    "plugins": ["prettier-plugin-tailwind", "prettier-plugin-tailwind-css"]
}

 

---

Plugin powinien ładować się automatycznie. Jeśli nie został znaleziony, to możesz załadować go przekazując w CLI parametr --plugin podając ścieżkę pluginu.

Pokaż jak zainstalowałeś ten plugin. Może w trakcie użycia Prettiera on rzuca jakieś błędy?

Answer 2

Zainstalowałem je tym poleceniem:

npm i --save-dev  prettier-plugin-tailwind prettier-plugin-tailwind-css 

jako dependencje developerskie.