Dodawanie i konfiguracja pluginów
Włączać oficjalne pluginy Tailwind, takie jak @tailwindcss/typography i @tailwindcss/forms, oraz konfigurować je w pliku tailwind.config.js.
Dodawanie i konfiguracja pluginów to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Działanie pluginów Tailwind
Pluginy Tailwind rozszerzają wygenerowany CSS, dodając nowe klasy narzędziowe, klasy komponentów, style bazowe lub modyfikatory wariantów. W przeciwieństwie do modyfikowania sekcji theme konfiguracji, które zmienia jedynie wartości tokenów projektowych, pluginy mogą dodawać całkowicie nowe reguły CSS, selektory, a nawet całe rodziny klas. Oficjalne pluginy zespołu Tailwind obejmują typowe potrzeby, takie jak typografia i formularze, a społeczność udostępnia setki kolejnych.
Oficjalny ekosystem pluginów Tailwind
Zespół Tailwind utrzymuje cztery pluginy first-party, z których każdy rozwiązuje konkretny problem wykraczający poza podstawowe klasy narzędziowe. @tailwindcss/typography stylizuje rozbudowaną zawartość HTML z Markdowna. @tailwindcss/forms resetuje style formularzy przeglądarki, ułatwiając ich dostosowywanie. @tailwindcss/aspect-ratio dodaje klasy narzędziowe dla proporcji obrazu w starszych przeglądarkach. @tailwindcss/container-queries dodaje obsługę zapytań kontenerowych w postaci klas narzędziowych.
# Install official Tailwind plugins
npm install @tailwindcss/typography
npm install @tailwindcss/forms
npm install @tailwindcss/aspect-ratio
npm install @tailwindcss/container-queriesDodawanie pluginów do konfiguracji
Pluginy rejestruje się w tablicy plugins pliku tailwind.config.js. Wystarczy użyć require() dla pluginu i dodać go do tablicy. Pluginy bez opcji konfiguracji dodaje się bezpośrednio. Pluginy przyjmujące opcje wywołuje się jako funkcje z obiektem konfiguracji. W jednej tablicy może współistnieć wiele pluginów bez konfliktów.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/container-queries'),
],
};Używanie @tailwindcss/typography
Plugin @tailwindcss/typography dodaje klasę prose oraz jej warianty, które stosują estetyczne style typograficzne do surowej zawartości HTML — na przykład wyrenderowanego Markdowna z systemu CMS lub bloga. Należy zastosować prose do kontenera, a wszystkie jego elementy potomne (nagłówki, akapity, listy, bloki kodu i cytaty blokowe) zostaną automatycznie ostylowane bez dodawania klas do każdego elementu osobno.
<!-- Enable prose styling on a container -->
<article class="prose prose-lg dark:prose-invert max-w-none">
<h1>My Blog Post</h1>
<p>This paragraph is automatically styled with readable typography.</p>
<ul>
<li>List items look great too</li>
<li>No extra classes needed</li>
</ul>
<pre><code>code blocks are styled</code></pre>
</article>Konfigurowanie @tailwindcss/typography
Plugin typograficzny można konfigurować zarówno za pomocą opcji pluginu, jak i motywu Tailwind. Użyj strategy: 'class', aby style prose były stosowane tylko wtedy, gdy klasa prose zostanie jawnie dodana, zamiast stosowania ich jako stylów bazowych. Skalę typograficzną prose (sm, base, lg, xl, 2xl) można dostosować, a style konkretnych elementów nadpisać za pomocą klucza theme.typography w konfiguracji.
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/typography')({
// No extra options needed for most uses
}),
],
theme: {
extend: {
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.700'),
'h1, h2, h3': { color: theme('colors.gray.900') },
a: { color: theme('colors.blue.600') },
},
},
}),
},
},
};Używanie @tailwindcss/forms
Plugin @tailwindcss/forms resetuje domyślne style przeglądarki dla elementów formularzy, takich jak pola input, listy wyboru, pola tekstowe, pola wyboru i przyciski radiowe. Bez niego różne przeglądarki renderują te kontrolki zupełnie inaczej. Dzięki niemu wszystkie elementy formularzy otrzymują spójny, minimalistyczny styl bazowy, który można następnie rozszerzać za pomocą klas narzędziowych Tailwind. Wybierz strategy: 'class', aby włączać reset dla poszczególnych elementów zamiast stosować go globalnie.
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/forms')({
strategy: 'class', // opt-in: use class='form-input' etc
// strategy: 'base' (default) — applies to all form elements
}),
],
};
<!-- With class strategy, add the form-* class -->
<input type="text" class="form-input rounded-lg border-gray-300 w-full" />
<select class="form-select rounded-lg" />
<input type="checkbox" class="form-checkbox text-blue-600" />Używanie @tailwindcss/container-queries
Zapytania kontenerowe CSS pozwalają komponentom reagować na rozmiar ich kontenera nadrzędnego, a nie na rozmiar viewportu. Plugin @tailwindcss/container-queries dodaje oznaczenie @container oraz responsywne prefiksy @sm:, @md: i @lg:, które działają podobnie jak punkty przerwania, ale odnoszą się do najbliższego kontenera. Jest to niezwykle przydatne podczas tworzenia naprawdę wielokrotnego użytku komponentów, które dostosowują się do dowolnego kontekstu, w którym zostaną umieszczone.
<div class="@container">
<div class="flex flex-col @md:flex-row gap-4">
<div class="@md:w-1/3">
<!-- Sidebar inside the container -->
</div>
<div class="@md:flex-1">
<!-- Content area -->
</div>
</div>
</div>Pluginy społeczności
Poza oficjalnymi pluginami istnieje rozbudowany ekosystem pluginów społeczności, który rozszerza Tailwind o biblioteki animacji, klasy narzędziowe do stylizowania pasków przewijania, wzory siatek i wiele innych funkcji. Popularne przykłady to tailwindcss-animate do animacji CSS (używany przez shadcn/ui), tailwind-scrollbar do stylizowania pasków przewijania oraz @headlessui/tailwindcss do wariantów stanów Headless UI. Przed dodaniem pluginu warto go sprawdzić — należy zweryfikować liczbę pobrań, stan utrzymania i wpływ na rozmiar bundla.
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-animate'),
require('tailwind-scrollbar'),
],
};
<!-- Use animation plugin classes -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
Animated content
</div>Pisanie pluginu inline
Można napisać niestandardowy plugin inline bezpośrednio w tablicy plugins, używając funkcji plugin Tailwind z modułu tailwindcss/plugin. Jest to przydatne do dodawania niewielkiego zestawu niestandardowych klas narzędziowych lub komponentów bez tworzenia osobnego pliku. Funkcja plugin otrzymuje obiekt pomocniczy z metodami addUtilities, addComponents, addBase i addVariant.
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.text-shadow-sm': { 'text-shadow': '0 1px 2px rgba(0,0,0,0.1)' },
'.text-shadow': { 'text-shadow': '0 2px 4px rgba(0,0,0,0.2)' },
'.text-shadow-lg': { 'text-shadow': '0 4px 8px rgba(0,0,0,0.3)' },
'.text-shadow-none': { 'text-shadow': 'none' },
});
}),
],
};Kolejność pluginów i konflikty
Pluginy są stosowane w kolejności, w jakiej występują w tablicy. Jeśli dwa pluginy dodają klasy narzędziowe o tej samej nazwie, wygrywa plugin znajdujący się później. Należy pamiętać, że pluginy używające addBase wstrzykują style do warstwy bazowej Tailwind, co może powodować interakcje z istniejącymi stylami resetującymi. Po dodaniu wielu pluginów należy sprawdzić konflikty, analizując skompilowany CSS pod kątem nieoczekiwanych nadpisań lub zduplikowanych deklaracji.
// Order matters when plugins could conflict
module.exports = {
plugins: [
require('@tailwindcss/forms'), // runs first
require('./plugins/my-forms'), // can override forms plugin if needed
require('@tailwindcss/typography'), // independent, no conflict
],
};Weryfikowanie instalacji pluginu
Po dodaniu pluginu należy sprawdzić, czy działa, upewniając się, że jego klasy pojawiają się w skompilowanym CSS i są prawidłowo stosowane w przeglądarce. W przypadku pluginu typograficznego dodaj klasę prose do elementu zawierającego treść i sprawdź zastosowane style. W przypadku formularzy sprawdź, czy elementy input mają ujednolicony wygląd bazowy. Jeśli klasy pluginu są nieobecne, upewnij się, że plugin znajduje się w odpowiedniej tablicy plugins, a pakiet jest zainstalowany.
# Verify plugin is installed
npm list @tailwindcss/typography
# Check if prose class appears in built CSS
npx tailwindcss build | grep '.prose'
# Or build to a file and search
npx tailwindcss -i ./input.css -o ./out.css && grep '.prose' out.css | head -5Szybki test
Sprawdź swoją wiedzę na temat dodawania i konfigurowania pluginów Tailwind.
Podsumowanie lekcji
W tej lekcji nauczyli się Państwo, że pluginy Tailwind rejestruje się w tablicy plugins konfiguracji, cztery oficjalne pluginy obejmują typografię, formularze, proporcje obrazu i zapytania kontenerowe, a także że można pisać pluginy inline za pomocą pomocniczej funkcji plugin(), aby tworzyć niestandardowe klasy narzędziowe. W następnej części zajmiemy się dodawaniem niestandardowych kolorów, fontów i odstępów do projektu Tailwind.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Dodawanie i konfiguracja pluginów” jest bezpłatna?
Tak — pełny tekst „Dodawanie i konfiguracja pluginów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dodawanie i konfiguracja pluginów”?
Włączać oficjalne pluginy Tailwind, takie jak @tailwindcss/typography i @tailwindcss/forms, oraz konfigurować je w pliku tailwind.config.js. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Dodawanie i konfiguracja pluginów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Budowa pliku tailwind.config.js
- Ścieżki content i usuwanie nieużywanych klas
- Rozszerzanie a nadpisywanie motywu
- Dodawanie i konfiguracja pluginów