Tailwind CSS - migracja z wersji 2 do 3

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
naslate
-
coolGray
nagray
-
gray
nazinc
-
trueGray
naneutral
-
warmGray
nastone
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
natext-clip
-
overflow-elipsis
natext-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