Square Bracket Notation in Tailwind CSS _ Tailwind Tutorial #6
54 views
Feb 21, 2024
"Square Bracket Notation in Tailwind CSS: Tailwind Tutorial #6" is a tutorial video that explores the advanced feature of square bracket notation in Tailwind CSS. This notation allows developers to dynamically generate utility classes based on values from their configuration file, enabling more flexible and efficient styling. The video guides viewers through examples and use cases of square bracket notation, demonstrating how it can be utilized to streamline styling tasks and enhance code maintainability. By the end of the tutorial, viewers will have a deeper understanding of this powerful feature and how to leverage it effectively in their Tailwind CSS projects.
View Video Transcript
0:00
Tailwind CSS рдХреЗ рдЕрдВрджрд░ рдЬреЛ classes рд╣реЛрддреА рд╣реИрдВ, рд╡реЛ рдХрд╛рдлреА рд╣рдж рддрдХ complete рд╣реЛрддреА рд╣реИрдВ, рдпрд╛рдирд┐ рдХрд┐ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧ Tailwind CSS рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рддреЛ there is a high chance рдХрд┐ рдЖрдк рд▓реЛрдЧ рдХреБрдЫ рднреА рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рдЙрд╕рдХреА class рдЖрдкрдХреЛ рдорд┐рд▓ рдЬрд╛рдПрдЧреА, for example, margin top, рдХрд┐рддрдиреА рднреА рдмрдбрд╝реА рдЖрдк рджреЗрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рдЖрдкрдХреЛ margin top рдХреЗ рд▓рд┐рдП class рдорд┐рд▓ рдЬрд╛рдПрдЧреА
0:30
рдЕрдкрдиреЗ рдорди рд╕реЗ рдмрдирд╛рдИ рд╣реБрдИ value, for example, 148 pixels, рдпрд╛ 162 pixels, рдЗрд╕ рддрд░рд╣ рдХреА value рдХреА margin рджреЗрдиреА рдкрдбрд╝ рд╕рдХрддреА рд╣реИ
0:37
padding рджреЗрдиреА рдкрдбрд╝ рд╕рдХрддреА рд╣реИ, рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдПрдХ particular value
0:41
рдЬреЛ рдХрд┐ CSS рдореЗрдВ use рдХрд░ рдкрд╛рддреЗ, рдЙрд╕рдХреЛ tailwind рдореЗрдВ miss рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рдЗрд╕ рддрд░рд╣ рдХреА рдЪреАрдЬрд╝реЛрдВ рдХреЗ рд▓рд┐рдП рд╣реЛрддрд╛ рд╣реИ square bracket notation
0:47
Tailwind CSS рдХреЗ рдЕрдВрджрд░ рдЖрдЬ рдЙрд╕реА рдХреЗ рдмрд╛рд░реЗAUT рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрддрд╛рдКрдВрдЧрд╛ рдбрд┐рдЯреЗрд▓ рдореЗрдВ рдФрд░ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрддрд╛рдКрдВрдЧрд╛ рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдЖрдк рд▓реЛя┐╜я┐╜
0:53
рдХреНрд▓рд╛рд╕реЗрд╕ рдСрди рдж рдлреНрд▓рд╛рдИ рдЬрдирд░реЗрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдпрд╛рдирд┐ рдХрд┐ рдЖрдк 148 рдкрд┐рдХреНрд╕рд▓ рд╡рд╛рд▓реА рдХреНрд▓рд╛рд╕ рдЯреЗрд▓ рд╡рд┐рдВрдб рдХреЗ рдкреНрд░реЛрдбрдХреНрд╢рди рдмрдВрдбрд▓ рдХреЗ рд╕рд╛я┐╜я┐╜
1:00
рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ browser рдореЗрдВ let's get started рдФрд░ рджреЗрдЦрддреЗ рд╣реИрдВ рдХрд┐ рдпрд╣ рдЪреАрдЬ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдХреА рдЬрд╛рддреА рд╣я┐╜я┐╜
1:05
рдЕрдЧрд░ рдореИрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рд╕реЗ рдХрд╣реВрдВрдЧреА рдореИрдВ рдЖрдк рдмрдирд╛рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдВ рдирдпрд╛ folder рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рдЙрд╕рдХреЗ рдЕрдВрджрд░ рдЬрд╛рдХя┐╜я┐╜
1:22
рдореИрдВ VS Code рдЦреЛрд▓рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдВ рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рджреЛрдмрд╛рд░рд╛ рд╕реЗ рдЖрдиреЗ рд╡рд╛рд▓рд╛ рд╣реВя┐╜я┐╜
1:26
рдЯреЗрд▓рд╡рд┐рдВрдЯ рд╕реАрдПрд╕рд╕ рдХреА рд╡реЗрдмрд╕рд╛рдЗрдЯ рдкрд░ рдЧреЗрдЯ рд╕реНрдЯрд╛рд░реНрдЯреЗрдб рдкрд░ рдЧреНрд▓рд┐рдХ рдХрд░рдХреЗ рдкреЛрд╕реНрдЯ рд╕реАрдПрд╕рд╕ рдкрд░ рдЧреНрд▓рд┐рдХ рдХрд░рдХреЗ рдпреЗ рд╕рд╛рд░реЗ рдХрдорд╛рдВрдбреНрд╕ рдЕрдЧрд░ рдореИрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рд╕реЗ рдХрд╣реВрдВрдЧреА рдореИрдВ рдЪрд▓рд╛рдиреЗ рд╡рд╛рд▓рд╛ рд╣реВрдБ рд▓реЗрдХрд┐рди рдЙрд╕рд╕реЗ рднреА рдкрд╣рд▓реЗ npm minute minus y рддреЛ рдЖрдк рд▓реЛрдЧ рдХрд╣реЛрдЧреЗ рдХрд┐ рдпрд╛рд░ рдпреЗ рдмрд╛рд░-рдмрд╛рд░ рдХреНрдпреЛрдВ рдХрд░рдХреЗ рджрд┐я┐╜я┐╜
2:16
рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрд╣реБрдд рдлрд╛рдпрджрд╛ рд╣реЛрдиреЗ рд╡рд╛рд▓рд╛ рд╣реИ рдЗрд╕ рдЪреАрдЬ рдХрд╛ рдареАрдХ рд╣реИ рд╡рд┐рдж рджреЗрдЯ рд╕реЗрдЯ рдореИрдВ рдЖрдкрдХреЛ рдЗрдВрдбреЗрдХреНрд╕ рдЯреЛрдбрд╝ рдЗрдЪреНрдЫя┐╜я┐╜
2:20
рдЕрдорд┐рд▓ рдмрдирд╛рдКрдВрдЧрд╛ рдареАрдХ рд╣реИ рдФрд░ рджреЗрдЦреЛ рдХрд┐рддрдиреА рдЬрд▓реНрджреА рдореИрдВрдиреЗ рдпрд╣ рд╕рд╛рд░рд╛ рдХрд╛ рд╕рд╛рд░рд╛ рдЗрдВрд╕реНрдЯреЙрд▓реЗрд╢рди рдХрд┐рдпрд╛ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рдареАрдХ рд╣я┐╜я┐╜
2:25
рдФрд░ рдЕрдм рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рд╣рдо рд▓реЛрдЧ рдмрд╛рдд рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рд╣реИрдВ square bracket notation рдХреА
2:30
рдХреНрдпрд╛ рд╣реИ square bracket notation, рдХреНрдпреЛрдВ рдпреВрдЬрд╝ рдХрд░реЗрдВ square bracket notation, рдФрд░ square bracket notation рдпреВрдЬрд╝ рдХрд░рдиреЗ рдХреЗ рдлрд╛рдЗрджрд╛ рд╣реИ рдХреНрдпрд╛ рд╣реИ
2:37
utility classes рдХреЗ рдЖрдЧреЗ рдХреНрдпреЛрдВ рд╣рдо рдХрднреА-рдХрднреА square bracket notation рдпреВрдЬрд╝ рдХрд░реЗрдВрдЧреЗ
2:41
рддреЛ рдпреЗ рдЪреАрдЬрд╝ рдореИрдВ рдЖрдк рд▓реЛрдЧ рдХреЛ рдмрддрд╛рдКрдВрдЧрд╛, рддреЛ рдореИрдВ рдЖрдкрдХреЛ рдХрд░реВрдБрдЧрд╛ рдХрд┐ рдЖрдкрдиреА tailwind.config.css рдореЗрдВ content рдореЗрдВ star рд▓рдЧрд╛ рджреВрдБрдЧя┐╜я┐╜
2:48
рдпрд╣ рд╕рд╛рд░реА рдХреА рд╕рд╛рд░реА files рдХреЛ рдореИрдВ include рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдореИрдВрдиреЗ рдпрд╣рд╛рдБ рдкрд░ рдЬрд▓реНрджреА рд╕реЗ screencast mode рдХреЛ рднреА on рдХрд░ рд▓рд┐рдпрд╛ рд╣я┐╜я┐╜
2:53
рддрд╛рдХрд┐ рдмрдбрд╝реЗ рдЕрд░рд╛рдо рд╕реЗ рдЕрдм рдореИрдВ рдЬреЛ рднреА рд▓рд┐рдЦреВрдВ рд╡реЛ рдЖрдк рд▓реЛрдЧреЛрдВ рдиреАрдЪреЗ рдЬреЛ рднреА рдХреА рдкреНрд░реЗрд╕ рдХрд░реВрдБ рд╡реЛ рджрд┐рдЦреЗрдВ рдареАрдХ рд╣я┐╜я┐╜
2:59
рдЕрдм рдпрд╣рд╛рдБ рдкрд░ рдЬрд▓реНрджреА рд╕реЗ рдХреНрдпрд╛ рдХрд░реЗрдВрдЧреЗ рд╣рдо рд▓реЛрдЧ square bracket notation рдХреА documentation рдореЗрдВ рдЬрд╛рдПрдВрдЧя┐╜я┐╜
3:03
square square square рдареАрдХ рд╣реИ рдФрд░ рд╕реНрдХреНрд╡рд╛рдпрд░ рдХреА рд╕реНрдХреНрд╡рд╛рдпрд░ рдмреИрдХреЗрдЯ рдиреЛрдЯреЗрд╢рди рдХреА рдбреЙрдХреНрдпреВрдореЗрдВрдЯреЗрд╢рди рдореЗрдВ рдЬрд╛рдиреЗ рдХреЗ рдмрд╛я┐╜я┐╜
3:13
рдореИрдВ рдЖрдкрдХреЛ рдмрддрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдХрд░рддрд╛ рд╣реИ рдкрд╣рд▓реЗ рдмрд╣реБрдд рд╣реА рдмреЗрд╕рд┐рдХ рд╡реЗ рдореИрдВ рдмрддрд╛рддрд╛ рд╣реВрдВ рдХреНрдпрд╛ рдХрд░рддрд╛ рд╣реИ рдореИрдВ рдпрд╣рд╛я┐╜я┐╜
3:17
рд▓рд┐рдЦреБрдВрдЧрд╛ рдбрд┐рд╡ рдбреЙрдЯ MX4 рдФрд░ рд▓рд┐рдЦреБрдВрдЧрд╛ рдмреАрдЬреА рд░реЗрдб 900 рдФрд░ рдЯреЗрдХреНрд╕ рд╡рд╛рдЗрдЯ рдПрдХреНрд╕рд╡рд╛рдЗрдЯ рдХрд░реЛрдЧреА рдмрд╣реБрдд рдЬреНрдпрд╛рджрд╛ рдбрд╛рд░реНрдХ рдХрд░ рджрд┐рдпя┐╜я┐╜
3:26
рд╣реИ рдореИрдВрдиреЗ рдареАрдХ рд╣реИ рдФрд░ рдЬреЛ рдЕрдкрдирд╛ рдмреИрдХрд░рд╛рдВрдб рд╣реИ рддреЛ рдореБрдЭреЗ рдЯреЗрдХреНрд╕ рдХреЛ рд╡рд╛рдЗрдЯ рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдЕрдм рдореИрдВ рдЖрдк рдпрд╣рд╛рдВ рдкрд░ рдХреНрдпрд╛ рдХрд░реВрдВрдЧя┐╜я┐╜
3:30
рдЗрд╕рдХреЛ рд╡рд╛рдЗрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рдпрд╣рд╛рдВ рдкрд░ рд▓рд┐рдЦреЛрдВрдЧрд╛ рд▓реЙрд░реЗрдо 23 рдареАрдХ рд╣реИ рд▓реЙрд░реЗрдо 23 рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рдХреБрдЫ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИ рд▓реЙрд░реЗя┐╜я┐╜
3:38
23 рд╕рд┐рдВрдкрд▓ рд╕рд╛ рдореИрдВ рдЖрдк рдЯреЙрдЧрд▓ рд╡рд░реНрдб рд░рд╛рдк рдХрд░ рд▓реЗрддрд╛ рд╣реВрдВ рддрд╛рдХрд┐ рджреЗрдЦрд┐рдП рдЖрдкрдХреЛ рдХреНрдпрд╛ рд▓рд┐рдЦрд╛ рд╣реБрдЖ рд╣реИ рд╕рд┐рдВрдкрд▓ рд╕рд╛ рдХреБрдЫ рдЯреЗрдХреНрд╕реНрдЯ рд╣реЛрддя┐╜я┐╜
3:45
рдЕрдм рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдЗрд╕рдХреЛ save рдХрд░реВрдБрдЧрд╛ рдФрд░ рдЬрд▓реНрджреА рд╕реЗ live server рдореЗрдВ рдЦреЛрд▓ рд▓реВрдБрдЧрд╛ open with live server
3:49
рддреЛ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдЗрд╕ рддрд░рд╣ рд╕реЗ рд╣реА рджрд┐рдЦреЗрдЧрд╛ рдЕрдм рдпрд╣рд╛рдБ рдкрд░ tailwind include рд╣реБрдИ рд╣реА рдирд╣реАрдВ рдФрд░ рдЙрд╕рдХрд╛ reason рдХреА рд╣я┐╜я┐╜
3:55
рдХрд┐ рдореИрдВрдиреЗ рдпрд╣рд╛рдБ рдкрд░ link css рдХрд░рдХреЗ tailwind рдХреЛ include рдХрд░рд╛ рд╣реА рдирд╣реАрдВ рдареАрдХ рд╣реИ рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ link rel is equal to style sheet
4:01
рдЯрд╛рдЗрд▓ рдЯреЙрдЯ рд╕реАрдПрд╕рд╕ рдХрд░реВрдВрдЧрд╛ рд╕реНрдЯрд╛рдЗрд▓ рдбреЙрдЯ рд╕реАрдПрд╕рд╕ рдпрд╣рд╛рдВ рдкрд░ рджреБрдмрд╛рд░рд╛ рд╕реЗ рд▓рд┐рдЦреВрдВрдЧрд╛ рдФрд░ рдпрд╣рд╛рдВ рдкрд░ рдореИрдВ рд▓реЗрдХрд░ рдЖрдКрдВрдЧрд╛ рд╣рдорд╛рд░я┐╜я┐╜
4:10
рдЬреЛ рдЧреЗрдЯ рд╕реНрдЯрд╛рд░реНрдЯреЗрдб рдХреЗ рдЕрдВрджрд░ рд╣рдореЗрдВ рдЯреЗрд▓рдмрд┐рдВрдб рд╕реАрдПрд╕рд╕ рдХреА рд▓реЗрдпрд░реНрд╕ рджреА рдЬрд╛рддреА рд╣реИ рд╡рд╣ рдХреЙрдкреА рдХрд░реВрдВрдЧрд╛ рдпрд╣ рдкрд░ рдареАрдХ рд╣реИ рдФрд░ рдпя┐╜я┐╜
4:30
рд▓реЛрдЧ рд▓рд╛рдкрд░рднрд╛рдИ рдХрд╛ рдирддреАрдЬрд╛ рдПрдирдкреАрдПрдо рд░рди рд╕реНрдЯрд╛рд░реНрдЯ рдареАрдХ рд╣реИ рдПрдирдкреАрдПрдо рдиреЗ рд╕реНрдЯрд╛рд░реНрдЯ рдХрд░реВрдВрдЧрд╛ рдЕрдм рдореЗрд░реЗ рд▓реЛрдХрд▓ рдЖя┐╜я┐╜
4:37
рдереА рд╕рд╛рдЙрде рдкрд░ рдЪрд▓ рдЬрд╛рдПрдЧрд╛ рдпрд╣ рдареАрдХ рд╣реИ рджреЗрдЦреЛ рдЪрд▓ рдЧрдпрд╛ рдмрдврд╝рд┐рдпрд╛ рдареАрдХ рд╣реИ рддреЛ рдпрд╣ рд╣рдорд╛рд░реА рдЯреЗрд▓ рдореЗрдВ рдЗрдВрдЯреНрд░реВрдб рд╣реЛ рдЪреБрдХя┐╜я┐╜
4:41
рдЕрдм рдЕрдЧрд▓реЗ рд╡реАрдбрд┐рдпреЛ рд╕реЗ рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛, рдпреЗ setup рд╡рдЧреИрд░рд╣ рдЬреНрдпрд╛рджрд╛ рдирд╣реАрдВ рдХрд░реВрдБрдЧрд╛, рдореИрдВ рдПрдХ template рдмрдирд╛ рд▓реЛрдЧрд╛ setup рдХреА
4:46
рдФрд░ рдЙрд╕рдХреЗ рдЕрдВрджрд░ changes рдХрд░рддрд╛ рдЬрд╛рдУрдЧрд╛, рдареАрдХ рд╣реИ, рддреЛ, рддреЛ рдЕрднреА рдпрд╣рд╛рдВ рдкрд░ рдХреНрдпрд╛ рдХрд░реВрдВрдЧрд╛ рдореИрдВ рд▓реЛрд░реЗрдо рдпрд╣ рдЬреЛ рд▓рд┐рдЦрд╛ рд╣реБрдЖ рд╣реИ рдЗрд╕рдХреЛ рдПрдЬрд╝ рдЯреЗрдВрдкрд▓реЗрдЯ рдпреВрдЬ рдХрд░реЛрдЧрд╛ рдПрдХ рдХрдо рдФрд░ рдХрд░реВрдВрдЧя┐╜я┐╜
4:54
рдореИрдВ рдпрд╣рд╛рдВ рдкрд░ рдФрд░ рдЗрд╕рдХрд╛ рд░рд╛рдо рд░рдЦ рджреВрдВрдЧрд╛ рдЯреЗрдВрдкрд▓реЗрдЯ рдареАрдХ рд╣реИ рдЗрд╕рдХреЛ рдореИрдВ рдХреЙрдкреА рдмреЗрд╕реНрдЯ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдореБрдЭреЗ рдмрддрд╛ рд╣реИ рдиреЛя┐╜я┐╜
5:01
рдиреЛрдЯ рдореЙрдбрд▓ рдХреЛ рдореБрдЭреЗ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдХреЙрдкреА рдкреЗрд╕реНрдЯ рдЗрд╕рд▓рд┐рдП рдореИрдВ рдиреЛрдЯ рдореЙрдбрд▓ рдХреЛ рдбрд┐рд▓реАрдЯ рдХрд░ рджреВрдВрдЧрд╛ рдПрдВрдЯрд┐рдПрдо рдЗрдВрд╕реНрдЯреЙрд▓ рдХрд░ рд▓реВрдВрдЧрд╛ рдмрд╛рдж рдореЗрдВ рдЕрдм рдпрд╣реЗя┐╜я┐╜
5:07
рдЬреЛ рдХреНрдпрд╛ рдХрд░реВрдВрдЧрд╛ рдереЛрдбрд╝рд╛ рдмреЗрдЯ рдХрд░реВрдВрдЧрд╛ рдЗрд╕рдХреЛ рдХреЙрдкреА рд╣реЛ рдЬрд╛рдиреЗ рджреЗрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕рдХреЛ рд░рд┐рдиреЗрдо рдХрд░рдХреЗ рдЖрдк рдиреЛрдЯ рдмреЙрдбрд┐рдВя┐╜я┐╜
5:11
рдЦреЛрдбрд╝рд╛ рд╣реВрдВрдЧрд╛ рдпрд╛рд░ рдкреЙрдЗрдВрдЯ рдХреЛ рдбрд╛рдЙрди рдЗрд╕рдХрд╛ рдирд╛рдо рд░рдЦреЗрдВрдЧреЗ рдЯреЗрдВрдкрд▓реЗрдЯ рдареАрдХ рд╣реИ рдЗрд╕рдХрд╛ рдирд╛рдо рд░рдЦреЗрдВрдЧреЗ рдЯреЗрдВрдкрд▓реЗрдЯ рдХреНрдпреЛрдВрдХя┐╜я┐╜
5:17
рдЖрдиреЗ рд╡рд╛рд▓реЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЗрд╕рдХреЛ рдпреВрдЬ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдФрд░ рдЕрднреА рд╕рд┐рдХреНрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рддреЛ рд╣рдордиреЗ рд╕реЗрдЯ рдЕрдк рдХрд░реА рд▓рд┐рдпрд╛ рд╣реИ рддреЛ рдЕрдм рдореИрдВ рдЖрдкрдХреЛ рдЬрд▓реНрджреА рд╕реЗ рдмрд╛рдд рдХрд░рдирд╛ рдЪрд╛рд╣реВрдБрдЧрд╛ рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рд╕реНрдХреНрд╡рд╛рд░ рдмреИрдХреЗрдЯ рдбреЛрдЯреЗрд╢рди рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рд╣реИ рд╕реНрдХреНрд╡рд╛рд░ рдмреИрдХреЗрдЯ рдбреЛрдЯреЗрд╢рди рдХрд╛ рдЗрд╕реНрддреЗя┐╜я┐╜
5:47
рдкрд░ рдЬрдм рдЖрдк рдпрд╣рд╛рдВ рдкрд░ рдПрдХ рджреЛ рдЪреАрдЬреЗрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрддрд╛рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рддреЛ рдЗрддрдирд╛ рд╕рд┐рдВрдкрд▓ рдерд╛ рд╕реНрдХреНрд░рд╛рдЗрдм рд░реЗрдХреЗрдЯ рдиреЛрдЯреЗрд╢рди рдЕрдм рдпрд╣рд╛рдВ рдкрд░ рд╣рдо рд▓реЛрдЧ рдХрд░реЗрдВрдЧреЗ рдХреНрдпрд╛ рдЗрд╕рдХреА рдбреЙрдХреНрдпреВрдореЗрдВрдЯреЗрд╢рди рдореЗрдВ рдЖрдПрдВрдЧреЗ рдФрд░ рдпрд╣рд╛рдВ рдкрд░ рдПрдХ рджреЛ рдЪреАрдЬреЗрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдмрддрд╛рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рддя┐╜я┐╜
6:17
рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рдпрд╣ рдХрд┐ рдЕрдЧрд░ рдЖрдк рдЗрд╕рдХреЛ рдЬрд┐рд╕ рддрд░рд╣ рд╕реЗ рдпреВрдЬ рдХрд░ рд░рд╣реЗ рд╣я┐╜я┐╜
6:21
рддреЛ рдЖрдкрдХреЛ рдЖрдкрдХреЛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдХрд┐ рдЖрдк 67 рд░реЗрдо рдХрд░реЗрдВ рддреЛ рдЖрдк рдХреНрдпрд╛ рдХрд░реЗрдВ? 67 рд░реЗрдо рдмрд╣реБрдд рд╣реЛ рдЧрдпя┐╜я┐╜
6:28
3 3 let us say for some weird reason 39 ram affinity
6:40
39 рд░рд╛рдо рдХреА рдореЗрдВ рджреЗ рдкрд╛ рд░рд╣рд╛ рд╣реВрдБ рдареАрдХ рд╣реИ рддреЛ рдпрд╣ рднреА рдореИрдВ рдХрд░ рдкрд╛ рд░рд╣рд╛ рд╣реВрдБ рддреЛ рдпрд╣рд╛рдБ рдкрд░ рдЖрдк рд▓реЛрдЧ рдХреЛрдИ рднреА рдпреВрдирд┐рдЯ рдореЗрдВ рд╡реИрд▓реНрдпреВрд╕ рдХреЛ рдбрд╛рд▓ рд╕рдХрддреЗ рд╣реЛ рдХреЛрдИ рднреА рдпрд╣рд╛рдБ рдкрд░ рджрд┐рдХреНрдХрдд рд╡рд╛рд▓реА рдмрд╛рдд рдирд╣реАрдВ рд╣реИ рдареАрдХ рд╣реИ рдЕрдм рдЗрд╕рдХреЗ рдмрд╛рдж рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рд╕реНрдХреНрд╡рд╛рдпрд░ рдмреНрд░реИрдХреЗрдЯ рдиреЛрдЯреЗрд╢рди рдЕрдЧрд░ рд▓рд┐я┐╜я┐╜
7:10
рдФрд░ рдЗрд╕рдХреЗ рдмрд╛рдж рдЗрд╕рдХреЗ рдЕрдВрджрд░ рдХреА рдЬреЛ value рд╣реИ рдЙрд╕рдХреЛ рдореИрдВ set рдХрд░ рд╕рдХрддрд╛ рд╣реВрдБ, рдлрд┐рд░ рдЗрд╕рдХреЗ рдмрд╛рдж рдпрд╣рд╛рдБ рдкрд░ рдмрд╣реБрдд рд╕рд╛рд░реА states рд╡рдЧреИрд░рд╛ рдХреА рдмрд╛рдд рд╣реЛ рд░рд╣реА рд╣реИ
7:17
states рд╡рдЧреИрд░рд╛ рдореИрдВ рдЖрдк рд▓реЛрдЧ рдХреЛ рдЖрдЧреЗ рдмрддрд╛рдКрдВрдЧрд╛ рдмрд╣реБрдд рдЬрд▓реНрджреА, рд▓реЗрдХрд┐рди рдпрд╣рд╛рдБ рдкрд░ рдЖрдк рд▓реЛрдЧ рджреЗрдЦ рд╕рдХрддреЗ рд╣реЛ
7:21
рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдЖрдк рд▓реЛрдЧ рд╕рд╛рд░реА рдХреА рд╕рд╛рд░реА classes use рдХрд░ рд╕рдХрддреЗ рд╣реЛ dynamically
7:25
рддреЛ рдХрднреА рднреА рд╣рдордХреЛ dynamically рдХреЛрдИ рднреА value use рдХрд░рдиреА рд╣реИ рддреЛ рд╣рдо рдЗрд╕ рддрд░рд╣ рд╕реЗ рдХрд░реЗрдВрдЧя┐╜я┐╜
7:29
рдХреНрдпрд╛ рдпреЗ рдЪреАрдЬ width рдореЗрдВ use рдХреА рдЬрд╛ рд╕рдХрддреА рд╣реИ рдорд╛рдирд▓реЛ рдореИрдВ рдЕрдЧрд░ рдЗрд╕рдХреЛ 30 VW рдХрд░ рджреВрдБ width рдХя┐╜я┐╜
7:35
рддреЛ рдореИрдВ рдХреНрдпрд╛ рдпреЗ use рдХрд░ рд╕рдХрддрд╛ рд╣реВрдБ the answer is definitely yes рдЖрдк рд▓реЛрдЧ use рдХрд░ рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
7:39
рдареАрдХ рд╣реИ рддреЛ рдореИрдВ рдЬрдм рдЗрд╕ рдХреНрд╡реЗрдпрд░ рдмреИрдХреЗрдЯ рдХрд╛ рдпреВрдЬ рдХрд░реВрдВрдЧрд╛ рддреЛ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдбрд╛рдЗрдирд╛рдорд┐рдХрд▓реА рд╡реИрд▓реНрдпреВрдЬ рдХреЛ рдпреВрдЬ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ рдЖрдкрдХреЛ рд╣рдореЗрд╢рд╛ рдЗрд╕рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рджрд┐ armed
7:48
know, рдХреНрдпреЛрдВрдХрд┐ рд╣рдо minimize рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЕрдкрдиреА production bundle рдХреЛ, рд╣рдо рдЪрд╛рд╣рддреЗ рд╣реИя┐╜я┐╜
7:52
рдХрд┐ рдХрдо рд╕реЗ рдХрдо CSS рд╣рдо ship рдХрд░реЗрдВ, рдореИрдВ рдЖрдк рдПрдХ рдЪреАрдЬ рджрд┐рдЦрд╛рддрд╛ рд╣реВрдБ рдпрд╣рд╛рдБ рдкрд░, рдЕрдЧрд░ рдореИя┐╜я┐╜
7:56
рдЗрд╕ рдкрд░ right рд▓рд┐рдЦрд░ рдХреЗ inspect рдХрд░реВрдБ, рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдЖ рдЬрд╛рдУ elements рдореЗя┐╜я┐╜
8:00
рдореИрдВ рдЗрд╕рдХреЛ рдпрд╣рд╛рдБ рдкрд░ inspect рдХрд░рддрд╛ рд╣реВрдБ рдФрд░ рдпрд╣ рдЬреЛ w 30 v w
8:04
рд▓рд┐рдЦрд╛ рд╣реБрдЖ рд╣реИ рдореИрдВрдиреЗ рдХрд┐ styles.css рдореЗрдВ рдЖрдЬ a part of my production рдордВрдбя┐╜я┐╜
8:08
add рд╣реЛрдХрд░ рдЖ рдЧрдИ рд╣реИ рдареАрдХ рд╣реИ рддреЛ рдпрд╣рд╛рдБ рдкрд░ рджреЗрдЦреЛ рдЬрд┐рддрдиреА рдореИрдВ classes рдпреВрдЬрд╝ рдХрд░реЛрдЧрд╛ рд╡я┐╜я┐╜
8:12
рдореЗрд░реЗ production рдордВрдбрд▓ рдореЗрдВ add рд╣реЛрдХреЗ ship рд╣реЛ рдЬрд╛рдПрдВрдЧреА so I hope рдХрд┐ рдЖрдк рд▓реЛрдЧ рдХреЛ рдордЬрд╝рд╛ рдЖрдпя┐╜я┐╜
8:16
рдпреЗ рдЬрд╛рди рдХрд░рдХреА рдХрд┐ рдЗрд╕ рддрд░рд╣ рд╕реЗ square bracket notation рдХреЛ use рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЕрднреА рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЗрддрдирд╛ рд╣реИ guys
8:21
Tailwind CSS рдХреА рдЬреЛ playlist рд╣реИ рдЙрд╕рдХреЛ рдЬрд░реВрд░ рд╕реЗ access рдХрд░ рд▓реЗрдирд╛ and I will see you next time