4/7/2022 ∙ 2 minuty czytania

Prettier + Tailwind = ❤️

Prettier to narzędzie do formatowania kodu. Wspiera wiele języków programowania, integruje się z wieloma edytorami kodu. Dzięki niemu nie musimy już się zastanawiać, w jaki sposób formatować nasz kod, żeby dopasować się do reszty plików w projekcie. Plik formatuje się przy zapisie.

Prettier posiada wtyczkę, która sortuje style pisane w tailwindzie w odpowiedniej kolejności. Robi to zgodnie z kilkoma z góry przyjętymi zasadami.

• Po pierwsze, style są posortowane zgodnie z kolejnością, w jakiej są zdefiniowane style w naszej aplikacji. Jeżeli otworzymy plik styles/app.css to zauważymy, ze najpierw będą to style z kategorii base, potem components i utilities.
• Ponadto, klasy, które nadpisują właściwości poprzednich, również następują po sobie.
• Klasy, które mają większy wpływ na layout, występują jako pierwsze, natomiast klasy pełniące funkcje dekoracyjna, po nich.
• Klasy z modyfikatorami są pogrupowane razem i występują na końcu.
• Klasy z modyfikatorami definiującymi responsywność są pogrupowane razem i występują po sobie od najmniejszego do największego.
• Wszystkie klasy, które nie są częścią tailwinda, zawsze są na początku

npm install -D prettier prettier-plugin-tailwindcss

Przed:

import { Outlet } from '@remix-run/react'

const Blog = () => {
  return (
    <article className="prose lg:prose-xl dark:prose-invert mx-4 my-16 sm:mx-auto">
      <Outlet />
    </article>
  )
}

export default Blog

Po:

import { Outlet } from '@remix-run/react'

const Blog = () => {
  return (
    <article className="prose dark:prose-invert lg:prose-xl mx-4 my-16 sm:mx-auto">
      <Outlet />
    </article>
  )
}

export default Blog

exit

Poniżej znajdziesz więcej postów, które mogą Cię zainteresować.