[frontendmasters] Tailwind CSS, v2
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅:
ΠΡΠΎΡ Π½Π°ΡΡΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΡΠΊΡΠΎΠΏ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠΉΡΠΈ ΠΏΡΡΡ ΠΎΡ Π½ΡΠ»Ρ Π΄ΠΎ Π³ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ ΠΊ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Tailwind CSS Π²Π΅ΡΡΠΈΠΈ 4. ΠΡ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ utility-first, Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ OKLCH, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ container queries, ΡΡΡΠΎΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ (group/peer/has), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π·Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
Π Ρ ΠΎΠ΄Π΅ Π²ΠΎΡΠΊΡΠΎΠΏΠ° Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ:
Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΏΡΡΠΌΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ utility-first ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Tailwind
Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ flexbox, grid, sub-grid ΠΈ container queries
Π‘ΡΡΠΎΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅, ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² group, peer ΠΈ has, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ARIA ΠΈ data-Π°ΡΡΠΈΠ±ΡΡΠΎΠ²
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΎΠΊΠ΅Π½Ρ, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠ΅ΠΌΡ Π½Π° OKLCH ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°
Π Π°ΡΡΠΈΡΡΡΡ Tailwind Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΡΠΈΠ»ΠΈΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅
ΠΡΠΎΡ Π½Π°ΡΡΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΠΎΡΠΊΡΠΎΠΏ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠΉΡΠΈ ΠΏΡΡΡ ΠΎΡ Π½ΡΠ»Ρ Π΄ΠΎ Π³ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ ΠΊ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Tailwind CSS Π²Π΅ΡΡΠΈΠΈ 4. ΠΡ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ utility-first, Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ OKLCH, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ container queries, ΡΡΡΠΎΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ (group/peer/has), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π·Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
Π Ρ ΠΎΠ΄Π΅ Π²ΠΎΡΠΊΡΠΎΠΏΠ° Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ:
Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΏΡΡΠΌΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ utility-first ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Tailwind
Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ flexbox, grid, sub-grid ΠΈ container queries
Π‘ΡΡΠΎΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅, ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² group, peer ΠΈ has, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ARIA ΠΈ data-Π°ΡΡΠΈΠ±ΡΡΠΎΠ²
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΎΠΊΠ΅Π½Ρ, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠ΅ΠΌΡ Π½Π° OKLCH ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°
Π Π°ΡΡΠΈΡΡΡΡ Tailwind Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΡΠΈΠ»ΠΈΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅
favorite
0
star
0
