Tailwind CSS w wersji 3 przynosi użytkownikom szereg usprawnień w porównaniu do swojego poprzednika. Na szczęście migracja pomiędzy wersjami nie powoduje przyśpieszonego siwienia włosów, jednak jest kilka elementów, na które trzeba zwrócić uwagę.

Potrzebujesz skondensowanej dawki wiedzy na temat Tailwind CSS? Przeczytaj moją książkę! Tailwind CSS. Projektowanie stron WWW i podejście utility-first

Aktualizacja podstawowych paczek za pomocą NPM

Na początek należy zaktualizować paczki npm: tailwindcss, postcss i autoprefixer. Ważną zmianą jest to, ze Tailwind CSS v3.0 nie wspiera już PostCSS 7 i konieczne jest użycie PostCSS 8.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Aktualizacja oficjalnych pluginów

Jeśli korzystamy z jakiegokolwiek oficjalnego pluginu, to jego również trzeba zaktualizować.

npm install -D @tailwindcss/typography@latest

npm install -D @tailwindcss/forms@latest

npm install -D @tailwindcss/aspect-ratio@latest

npm install -D @tailwindcss/line-clamp@latest

Domyślny tryb JIT

Od wersji trzeciej tryb Just-In-Time jest już domyślnym silnikiem Tailwinda. Nie trzeba już używać poniższej konfiguracji w pliku tailwind.config.js.

module.exports = {
  mode: 'jit',
}

Usunięcie PurgeCSS

Tailwind CSS nie korzysta już z PurgeCSS i aby to uzmysłowić w pliku konfiguracyjnym tailwind.config.js konieczna jest zmiana purge: [] na content: [].

Tryb ciemny

Tryb ciemny używa standardowo CSS i prefers-color-scheme, więc jeśli w projekcie korzystamy z darkMode: 'media' lub darkMode: 'false' to śmiało możemy te wpisy usunąć z pliku konfiguracyjnego tailwind.config.js.

Konfiguracja wariantów

Dzięki trybowi JIT nie musimy już deklarować rozszerzeń dla wariantów w konfiguracji. Można je usunąć z tailwind.config.js.

Zmiany w palecie kolorów

Paleta kolorów w Tailwind CSS została bardzo rozbudowana. Jeśli używaliśmy wcześniej kolorów o nazwach green, yellow i purple należy je podmienić na nazwy emerald, amber i violet. W przeciwnym razie kolorystyka naszego interfejsu może ulec nieprzewidzianej zmianie.

Alternatywą jest przypisanie odpowiednich aliasów do kolorów w pliku konfiguracyjnym tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        green: colors.emerald,
        yellow: colors.amber,
        purple: colors.violet,
      }
    },
  },
  // ...
}

Zmiany w palecie szarości

Dotychczas w podstawowej wersji dostępny był jedynie kolor gray. W rozszerzonej palecie szarości było więcej. Poniżej przedstawiam listę konwersji nazewnictwa:

• blueGray na slate
• coolGray na gray
• gray na zinc
• trueGray na neutral
• warmGray na stone

Brak konieczności używania .filter i .transform

Używając filtrów i przekształceń nie trzeba już używać dodatkowych klas .filter i .transform.

Kod:

<div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">

Będzie wyglądał więc nieco krócej:

<div class="scale-50 grayscale backdrop-blur-sm">

Zmiany nazewnictwa niektórych klas

Kilka klas zostało zmienionych, poniżej znajduje się ich lista:

• overflow-clip na text-clip
• overflow-elipsis na text-ellipsis

Separator nie może być łącznikiem (-)

Ze względu na zmiany w silniku Tailwind CSS nie daje już możliwości definiowania własnego separatora w formie łącznika (-). Zamiast niego należy użyć innego, np. znaku podkreślenia.

module.exports = {
  separator: '_',
}

Konieczność użycia @tailwind base

Jeśli nie chcieliśmy używać bazowych stylów narzucanych przez framework, to obecnie nie zrobimy tego przez usunięcie dyrektywy @tailwind base;. Jeśli została wcześniej usunięta z głównego pliku CSS to należy ją przywrócić, a wyłączenie stylów domyślnych zrealizować przez zmiany w konfiguracji:

module.exports = {
  corePlugins: {
    preflight: false,
  },
}

Podsumowanie zmian znajdziesz również w oficjalnej dokumentacji, która była źródłem do powstania tego wpisu.

Potrzebujesz skondensowanej dawki wiedzy na temat Tailwind CSS? Przeczytaj moją książkę! Tailwind CSS. Projektowanie stron WWW i podejście utility-first