@layer Directive in Tailwind_ Tailwind Tutorial #10
21 views
Feb 21, 2024
"@layer Directive in Tailwind: Tailwind Tutorial #10" explores the usage and benefits of the "@layer" directive within the Tailwind CSS framework. This advanced feature enables developers to organize and control the order in which their utility classes are generated in the final CSS output. The tutorial demonstrates how to leverage "@layer" to manage the specificity of styles and ensure consistent styling across components and layouts. Viewers will learn practical techniques for structuring their Tailwind CSS projects effectively, improving code organization and maintainability. By the end of the tutorial, developers will have a solid understanding of how to utilize the "@layer" directive to optimize their Tailwind CSS workflow.
View Video Transcript
0:00
рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рд╣рдо рд▓реЛрдЧ рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ layer directive рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ tailwind CSS рдХреЗ рдЕрдВрджя┐╜я┐╜
0:05
tailwind рдХреЗ рдЕрдВрджрд░ рдЬреЛ рддреАрди layers рд╣реЛрддреА рд╣реИрдВ, рдХрднреА-рдХрднреА рд╣рдо рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдХрд┐ рд╣рдо рд▓реЛрдЧ рдПрдХ particular layer рдХреЗ рдЕрдВрджрд░ changes рдХрд░реЗя┐╜я┐╜
0:11
рдпрд╛рдирд┐ рдХрд┐ рд╣рдо рд▓реЛрдЧ рдЬреЛ classes add рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рд╡реЛ рдПрдХ particular layer рдХреЗ рдЕрдВрджрд░ add рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИя┐╜я┐╜
0:16
рдпрд╛ рдХреЛрдИ рднреА CSS рд▓рд┐рдЦрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдПрдХ particular layer рдХреЗ рдЕрдВрджрд░ рд▓рд┐рдЦрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ
0:20
рдРрд╕рд╛ рд╣рдо рд▓реЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, layer directive рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдХреЗ, рдПрдХ particular layer рдХреЛ override рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ
0:24
рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рд╣рдо рд▓реЛрдЧ layer directive рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реАрдЦреЗрдВрдЧреЗ, рдФрд░ рдпрд╣ рд╕реАрдЦреЗрдВрдЧреЗ рдХрд┐ layer directive рдХрд╛ use рдХреНрдпрд╛ рд╣реИ
0:29
рд╣реИ рдпрд╛рд░ рд╣рдо рдбрд┐рд▓реЗрдХреНрдЯрд▓реА рдЕрдкрдиреЗ рдЯреЗрд▓рд╡рд┐рдВрдб рдЗрд╕ рдЬреЛ рд╣рдорд╛рд░реА рдЗрдирдкреВрдЯ рд╕реЗ рдЗрд╕ рдлрд╛рдЗрд▓ рд╣реИ рдЙрд╕ рдкрд░ рдбрд┐рд▓реЗрдХреНрдЯрд▓реА рд╣рдо рд▓реЛрдЧ рдирд╣реАя┐╜я┐╜
0:34
рдЪреЗрдВрдЬреЗрд╕ рдХрд░ рд╕рдХрддреЗ рдПрдХ рдкрд░реНрдЯрд┐рдХреБрд▓рд░ рд▓реЗрдпрд░ рдХреЛ рдХреНрдпреЛрдВ рд▓реЛрдЧ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рд▓реЗрдЯреНрд╕ рдХреЗрдЯ рд╕реНрдЯрд╛рд░реНрдЯреЗрдб рд╡рд┐рдбрд┐рдпя┐╜я┐╜
0:38
рддрд╛рдЗрдо рдХреЛ рдмрд┐рдирд╛ рд╡реЗрд╕реНрдЯ рдХреА рдореИрдВрдиреЗ рдЯреЗрд▓рд╡рд┐рдВрдб рд╡рд╛рд▓реА рдЯреЗрдВрдкреНрд▓реЗрдЯ рдХреЛ рдХрд░ рд▓рд┐рдпрд╛ рдХреЙрдкреА рдФрд░ рдпрд╣рд╛рдВ рдкрд░ рдЯреЗрд▓рд╡рд┐рдВрдб рдЯреНрдпреВрдЯреЛрд░рд┐рдпрд▓ 10 рдХрд╛ рдирд╛рдо рджреЗ рджреВрдБрдЧрд╛ рдЗрд╕рдХрд╛ рдирд╛рдо рдХрд░рд▓ рдХрд░рддреЗ рд╣реБрдП рдореИрдВ рд░рд╛рдЗрдЯ рд▓рд┐рдЦ рдХрд░рдХреЗ рдУрдкрди рд╡рд┐рде рдХреЛрдб рдХрд░реВрдБрдЧрд╛ рдпрд╣ рдУрдкрди рд╡рд┐рде рдХреЛрдб рд╣реЛ рдЬрд╛рдПрдЧреА рдпрд╛рдирд┐ рдХрд┐ рд╡рд┐рдПя┐╜я┐╜
1:08
рдЪреАрдЬреЗрдВ рдереА рдЙрдирдХреЛ рдореИрдВ рдбрд╛рд▓ рдХрд░ рд░рдЦреВрдВрдЧрд╛ рдЕрдЪреНрдЫрд╛ рдПрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реВрдВ рдпрд╣рд╛рдВ рдкрд░ рдореИрдВ рдмрдЯрди рдбреЙрдЯ рд▓реЗрдЯрд░ рд╕реЗ рдЯреЗрдХреНрд╕реНрдЯ рдмреНрд▓я┐╜я┐╜
1:17
рдХрд░ рджреЗрддрд╛ рд╣реВрдВ рдбреЙрдЯ рдмреАрдЬреА рд░реЗрдб 600 рдХрд░ рджреЗрддрд╛ рд╣реВрдВ рдареАрдХ рд╣реИ рдФрд░ рдЯреЗрдХреНрд╕реНрдЯ рдмреНрд▓реВ рдХреМрди рд╕рд╛ рд╡рд╛рд▓рд╛ рдХрд░реЛ рдЯреЗрдХреНрд╕реНрдЯ рдмреНрд▓реВ рдпя┐╜я┐╜
1:24
рджреЗрддрд╛ рд╣реВрдВ рдареАрдХ рд╣реИ рдЕрдм рдЕрдЧрд░ рдореИрдВ рдпрд╣рд╛рдВ рдкрд░ npm run start рд▓рд┐рдЦ рджреВрдВрдЧрд╛ рддреЛ рдЖрдк рд▓реЛрдЧ рдпрд╣рд╛рдВ рдкрд░ рджреЗрдЦ рд╕рдХрддреЗ рд╣реЛ рдХрд┐ рдореЗрд░я┐╜я┐╜
1:31
рдЬреЛ рд╕рд░реНрд╡рд░ рд╣реИ рд╡рд╣ рдЪрд▓ рдЪреБрдХрд╛ рд╣реИ рдареАрдХ рд╣реИ рдЕрдм рдпрд╣рд╛рдВ рдкрд░ рдЖрдк рд▓реЛрдЧ рджреЗрдЦреЛ рдЬреЛ рдореИрдВрдиреЗ рдмрдЯрди рдмрдирд╛рдпрд╛ рдерд╛ рд╡рд╣ рдЖрдпрд╛ рд╣реИ рдирд╣реАрдВ рдпрд╣ рдХреИрд╕я┐╜я┐╜
1:36
рд▓рд╛рдЦ рд╣реИ рджреЗрдЦрддреЗ рд╣реИрдВ рдХреИрд╕рд╛ рдордЬрд╛рдХ рд╣реИ рдРрд╕рд╛ рдХреНрдпреЛрдВ рд╣реЛ рд░рд╣рд╛ рд╣реИ рдпрд╛рд░ рдмрдбрд╝рди рдЬреЛ рдореИрдВрдиреЗ рдмрдирд╛рдпрд╛ рд╡рд╣ рдЖрдирд╛ рдЪрд╛рд╣рд┐рдП рдирд╛ рддреЛ рдпрд╣рд╛рдВ рдкя┐╜я┐╜
1:42
рдЖрдк рд▓реЛрдЧ рдЕрдЧрд░ рджреЗрдЦреЛ рддреЛ рдореИрдВрдиреЗ рд╡рд░реНрдб рд▓рд╛рд╕реЗрд╕ рдЗрди рдпрд╣ рдЗрд╕рдХреЗ рдЕрдВрджрд░ рдХреБрдЫ рд▓рд┐рдЦрд╛ рд╣реА рдирд╣реАрдВ рд▓рд┐рдЦрдирд╛ рддреЛ рдЪрд╛рд╣рд┐рдП рддреЛ рдХреБрдЫ рдЗрд╕ рдЗрдЬ я┐╜я┐╜
1:50
рдирд╛рдЗрд╕ рджрд┐рд╕реНрд╕реЗ рдирд╛рдЗрд╕ рдирд┐рдпреБрдХреНрддрд┐рдд рддреЛ рдХреЛрдИ рдмрдЯрди рдХреЗ рдЕрдВрджрд░ рдкреВрд░рд╛ рдкреИрд░рд╛рдЧреНрд░рд╛рдлреНрдЯ рд▓рд┐рдЦрддрд╛ рд╣реИ рдареАрдХ рд╣реИ рдЪрд▓реЛ рд▓рд┐рдЦ рднреА рд╕рдХрддреЗ рд╣реИя┐╜я┐╜
1:57
рдХреЛрдИ рдпрд╣ рд╣рдорд╛рд░рд╛ рдШрдЯрд┐рдпрд╛ рд╕рдм рд░реЗрдбрд┐рд╡реЗрдЯ рдХреЗ рдЕрдВрджрд░ рдареАрдХ рд╣реИ рдореБрдЭреЗ рдкрддрд╛ рдЕрдЪреНрдЫрд╛ рдирд╣реАрдВ рд▓рдЧ рд░рд╣рд╛ рд╣реИ рдореИрдВ рдХреЙрдкреА рдХрд░рдХреЗ рдЕрдЪреНрдЫрд╛ рдня┐╜я┐╜
2:02
рдЬрд╛ рд╕рдХрддрд╛ рд╣реВрдВ рдареАрдХ рд╣реИ рд╡реИрд╕реЗ рднреА рдХреЙрдкреА рдХрд░рдХреЗ рдмрдирд╛ рдЬрд╛рддреЗ рд╣реИрдВ рдЖрдЬрдХрд▓ рд╕рд╛рд░реА рдЕрдЪреНрдЫреА рдЪреАрдЬ рд╣реИ рдореИрдВ рдпрд╣рд╛рдВ рдкрд░ рдПрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реВя┐╜я┐╜
2:08
рдкрд░ рд░рд╛рдЙрдВрдбреЗрдб рдПрдХреНрд╕реЗрд▓ рдХрд░ рджреЗрддрд╛ рд╣реВрдВ рдареАрдХ рд╣реИ рдереЛрдбрд╝реА рд╕реА рдЦреБрд╢реВрд░рддреА рдереЛрдбрд╝реА рд╕реА рдЦреБрд╢реВрд░рддреА рдорд┐рд▓ рдЧрдИ рдмрдЯрди рдХреЛ рдореЗрд░реЗ рдкреИрдбрд╝рд┐рдВрдЧ рдХя┐╜я┐╜
2:33
рдПрд╕рдо рдФрд░ рдЕрдЧрд░ рдореБрдЭреЗ рдЕрдЪреНрдЫрд╛ рдмрдирд╛рдирд╛ рдЗрд╕рдХреЛ рддреЛ рдореБрдЭреЗ рдмреНрд▓реВ рдирд╣реАрдВ рдмрд╛рдЗрдЯ рдХрд░рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдЗрд╕рдХреЛ рдареАрдХ рд╣реИ рддреЛ рдЖрдк рд▓реЛрдЧ рдпрд╣рд╛рдВ рдкрд░ рджреЗрдЦя┐╜я┐╜
2:38
рдХреНрд▓рд┐рдХ рдореА рдХрд╛рдлреА рдЕрдзрд┐рдХ рдмрдврд╝рд┐рдпрд╛ рдмрдирд╛ рджрд┐рдпрд╛ рд╣рд╛рдВ рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХреБрдЫ рд▓реЛрдЧреЛрдВ рдХреЛ рдЕрдЪреНрдЫрд╛ рднреА рдирд╣реАрдВ рд▓рдЧреЗрдЧрд╛ рдмрдЯ рдпрд╣ рдХрд╛рдля┐╜я┐╜
3:03
рдФрд░ рдпреЗ рдХрд░ рджреВрдБ рдФрд░ рдпреЗ рдЪреАрдЬ рдореЗрдВ рдбрд╛рд▓ рджреВрдБ .btn рдореЗрдВ рддреЛ рдЖрдк рдХрд╣реЛрдЧреЗ рдпрд╛я┐╜я┐╜
3:07
рд╣реИрд░реА рднрд╛рдИ рдпреЗ рдкрд┐рдЫрд▓реЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдмрддрд╛рдпрд╛ рдерд╛ рдпрд╛рд░ рдмрд╛рд░ рдмрд╛рд░ рдХреНрдпреЛрдВ рдмрддрд╛ рд░рд╣реЗ рд╣реЛ рдореИрдВ рднреА рдХрд╣реВрдБрдБ рд╣рд╛рдИ рдпрд╛рд░ рдмрддрд╛рдпрд╛ рдея┐╜я┐╜
3:14
рд▓реЗрдХрд┐рди рдЕрднреА рдЬреЛ рдореИрдВ рдмрддрд╛рдиреЗ рд╡рд╛рд▓рд╛ рд╡реЛ рдЗрд╕рд╕реЗ related рд╣реИ рдЗрд╕рд▓рд┐рдП рдЗрд╕ рдмрд╛рдд рдХреЛ рджреБрдмрд╛рд░рд╛ рд╕я┐╜я┐╜
3:18
рдмреЛрд▓ рд░рд╣рд╛ рд╣реВрдБ dot btn рдХреЗ рдЕрдВрджрд░ рдЕрдЧрд░ рдореИрдВрдиреЗ рдпреЗ apply рдХрд░ рджрд┐рдпрд╛ рддреЛ рдЕя┐╜я┐╜
3:21
рдореИрдВ btn рдХреЛ as a class рдпреВрдЬрд╝ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдБ рдЕрдЧрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ class is equal to рдпреЗ рд╕рдм рдирд╛ рд▓рд┐рдЦя┐╜я┐╜
3:26
btn рд▓рд┐рдЦреЛ рддреЛ рдХрд╛рдо рдмрди рдЬрд╛рдПрдЧрд╛ рдареАрдХ рд╣реИ рд▓реЗрдХрд┐рди рдЕрдм рдпрд╣рд╛рдБ рдкрд░ рдЖрдк рдПрдХ рдмрд╛рдд рд╕реБрдия┐╜я┐╜
3:30
рдореИрдВ рдЕрдЧрд░ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ рдпреЗ рдореЗрд░реА let us say utility layers рдХреЗ рдмрд╛рдж рдЖя┐╜я┐╜
3:34
component layers рдХреЗ рдмрд╛рдж рдЖрдП base layer рдХреЗ рдмрд╛рдж рдЖрдП рддрдм рдореБрдЭреЗ рдпрд╣рд╛рдБ рдкрд░ рдХреНрдпрд╛ рдХрд░рдирд╛ рдкрдбрд╝ рд░рд╣рд╛ рд╣я┐╜я┐╜
3:39
рдЗрд╕рдХреЛ рдЗрд╕рдХреЗ рдмреАрдЪ рдФрд░ рдмреАрдЪ рдбрд╛рд▓рдирд╛ рдкрдбрд╝ рд░рд╣рд╛ рд╣реИ рдЕрдм рдпрд╣ рдХрд╣рд╛рдБ рдкрд░ рдЖрдПрдЧрд╛ рдмреАрдЯреА рдПрди рдореЗрд░реА рд╕реА рдПрд╕ рдПрд╕ рдореЗрдВ рдХрд╣рд╛рдВ рдкрд░ рдбрд┐рдлрд╛рдЗрдВрдб рд╣реЛрдЧя┐╜я┐╜
3:44
рдмреАрдЯреА рдПрди рдореЗрд░реА рд╕реА рдПрд╕ рдПрд╕ рдореЗрдВ рдбрд┐рдлрд╛рдЗрдВрдб рд╣реЛрдЧреА рдХрдореНрдкреЛрдиреЗрдВрдЯреНрд╕ рд▓реЗрдпрд░ рдХреЗ рдмрд╛рдж рдФрд░ рдпреВрдЯрд┐рд▓рд┐рдЯреАрдЬ рд▓реЗрдпрд░ рд╕реЗ рдкрд╣рд▓я┐╜я┐╜
3:50
рдЕрдЧрд░ рдореИрдВ рдпрд╣ рдЪреАрдЬ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдпрд╣рд╛рдБ рдкрд░ рджрд┐рдЦрд╛рдирд╛ рдЪрд╛рд╣реВрдБ рддреЛ right click рдХрд░рдХреЗ inspect рдХрд░реВрдБрдЧрд╛, network рдкрд░ click рдХрд░реВрдБрдЧрд╛, network рдкрд░ рдирд╣реАрдВ рдХрд░реВрдБрдЧрд╛
3:55
рд╕реАрдзреЗ elements рдкрд░ рдХрд╣реАрдВ рдкрд░ рднреА click рдХрд░рдХреЗ, style.css рдкрд░ click рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдЕрдЧрд░ рдореИрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ btn class рджрд┐рдЦрд╛рдКрдВ, рддреЛ рдпрд╣ 382 рдореЗрдВ рдЖ рд░рд╣рд╛ рд╣реИ
4:02
рдпрд╛рдирд┐ рдХрд┐ рдореЗрд░реА рд╕рд╛рд░реА рдХреА рд╕рд╛рд░реА рдЬреЛ component classes рд╣реИрдВ рдФрд░ base classes рд╣реИрдВ рдЙрдирдХреЗ рдмрд╛рдж рдЖ рд░рд╣рд╛ рд╣я┐╜я┐╜
4:07
рдЕрдЧрд░ рдореИрдВ рдЗрд╕ btn рдХреЛ рдиреАрдЪреЗ рдЦрд┐рд╕рдХрд╛ рджреВ рддреЛ рдпрд╣ рдпрд╣рд╛рдБ рдкрд░ рдЖ рдЬрд╛рдПрдЧрд╛ рдареАрдХ рд╣реИ рдЗрд╕рдХреЛ рдореИрдВ рдЬрд┐рддрдирд╛ рдиреАрдЪреЗ рдорди рдЪрд╛рд╣реЗ рдЦрд┐рд╕рдХрд╛ рд╕рдХрддрд╛ рд╣реВя┐╜я┐╜
4:13
рдареАрдХ рд╣реИ рдпрд╣ рдмрд╛рдд рддреЛ рдЖрдкрдХреЛ рдорд╛рд▓реВрдо рд╣реИ рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ рдореИрдВ рдЕрдкрдиреА style.css рдХреЛ рдРрд╕реЗ рд╣реА рд░рд╣рдиреЗ рджреВя┐╜я┐╜
4:19
рдФрд░ рдореИрдВ рдЗрди рддреАрдиреЛрдВ lines рдХреЗ рдмрд╛рдж add рдХрд░реВрдБ рдХрднреА-рдХрднреА рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рдХрд┐ рдЬреЛ рдЖрдкрдХреА CSS рд╣реЛрддреА рд╣реИ рд╡реЛ accessible рдирд╣реАрдВ рд╣реЛрддреА рд╣я┐╜я┐╜
4:25
рдорд╛рди рд▓реЛ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ рдХрд┐ рдпреЗ рдЬреЛ рддреАрди рд╣рдордиреЗ рдЖрдкрд░ рд▓рд┐рдЦреА рд╣реБрдИ рд╣я┐╜я┐╜
4:29
рд▓реЗрдпрд░ рд╕реНрдЯреЗрд▓ рдореЗрдВ рдХрд┐рд╕рдХреЗ рдмрд╛рдж рдореИрдВ рдРрд╕рд╛ рдХрдорд╛рдб рд▓рд┐рдЦреВрдВ рдХрд┐ рдСрдЯреЛрдорд╛рдЯрд┐рдХрд▓реА рдХрдВрдкреЛрдиреЗрдВрдЯ рд▓реЗрдпрд░ рдХреЗ рдмрд╛рдж рд╣реА рдЖ рдЬрд╛я┐╜я┐╜
4:34
рддреЛ рдореИрдВ рд▓реЗрдпрд░ рдбрд┐рд░реЗрдХреНрдЯрд┐рд╡ рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЕрдм рд▓реЗрдпрд░ рдбрд┐рд░реЗрдХреНрдЯрд┐рд╡ рдХреЛ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рдпрд╣ рдЖя┐╜я┐╜
4:39
components components
5:00
рдбреЙрдЯ рдХрдВрдкреЛрдиреЗрдВрдЯреНрд╕ рдЖрдлреНрдЯрд░ рдареАрдХ рд╣реИ рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦ рджреЗрддрд╛ рд╣реВрдБ рд▓реЗрдЯ рдЕ рд╕я┐╜я┐╜
5:08
text align center рдореИрдВ рд▓рд┐рдЦ рд░рд╣рд╛ рд╣реВрдБ рдЗрд╕ рдмрд╛рдд рдХреЛ рдорд╛рди рд▓я┐╜я┐╜
5:12
рдмреИ рдХреБрдЫ рдРрд╕рд╛ рдХрд░рддрд╛ рд╣реВрдБ рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ components after рдвреВрдиреВрдБ control f
5:16
control f рддреЛ рдпрд╣рд╛рдБ рдкрд░ рджреЗрдЦреЛ рдпрд╣ 395 рд▓рд╛рдЗрди рдореЗрдВ рд╣реИ рдареАрдХ рд╣я┐╜я┐╜
5:22
рдФрд░ рдореЗрд░реА рдЬреЛ btn рд╣реИ рд╡реЛ рдХрд╣рд╛рдБ рдкрд░ рд╣реИ рдпрд╣ рднреА рджреЗрдЦрддрд╛ рд╣реВрдБ рд╡реЛ 395 рдореЗрдВ рдерд╛ рдпрд╣ 382 рдореЗрдВ рд╣я┐╜я┐╜
5:27
рдпрд╛рдирд┐ рдХрд┐ рдореИрдВрдиреЗ рдХрд░рд╛ рдХреНрдпрд╛ рдмрд╛рдж рдореЗрдВ рд▓рд┐рдЦрдиреЗ рдХреЗ рдмрд╛рдж рднреА components рд╡рд╛рд▓реА layer рд╕я┐╜я┐╜
5:33
рдкрд╣рд▓реЗ рдореИрдВрдиреЗ рдбрд╛рд▓ рджрд┐рдпрд╛ рдЗрд╕ рдЪреАрдЬрд╝ рдХреЛ рдпрд╛рдирд┐ рдХрд┐ component layer рдХреЗ рдмрд╛рдж рдбрд╛рд▓ рджрд┐рдпя┐╜я┐╜
5:36
basically рдЖрдк рд▓реЛрдЧ рджреЗрдЦреЛ рдпрд╣рд╛рдБ рдкрд░ рдЬреЛ рдореЗрд░реА components layer рд╣реИ рдпрд╣ рдореЗрд░реА components layer рд╣я┐╜я┐╜
5:41
рдпрд╣ рдЬреИрд╕реЗ рд╣реА рдЦрддрдо рд╣реЛ рд░рд╣реА рд╣реИ рдпрд╣рд╛рдБ рдкрд░ рдЬреИрд╕реЗ рд╣реА рдЦрддрдо рд╣реЛ рд░рд╣реА рд╣я┐╜я┐╜
5:45
рдЙрд╕рдХреЗ рдмрд╛рдж components after рдЖ рд░рд╣рд╛ рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ btn рд╣реИ рдЗрд╕рдХреЛ рдЗрд╕рдиреЗ рдХрд╣рд╛ рдбрд╛рд▓рд╛ рд╕реАрдзреЗ components рдХреЗ рдмрд╛я┐╜я┐╜
5:50
рддреЛ рдХрд┐рд╕ layer рдХреЗ рдмрд╛рдж рдЖрдк рд▓реЛрдЧ рдбрд╛рд▓рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реЛ layers directive рдЖрдкрдХреЛ рдЗрд╕ рдмрд╛рдд рдореЗрдВ рдорджрдж рдХрд░рддрд╛ рд╣я┐╜я┐╜
5:57
рдЖрдк рдЬрд┐рд╕ рднреА layer рдХрд╛ рдирд╛рдо рдбрд╛рд▓реЛрдЧреЗ layer рдХреЗ рдмрд╛рдж рдпрд╛рдирд┐ рдХрд┐ at the rate layer рдХреЗ рдмрд╛я┐╜я┐╜
6:01
рд╡рд╣реАрдВ рдкрд░ рдЖрдкрдХреА рдпрд╣ рдЬреЛ class рд╣реИ рд╡реЛ рдкрдЯрдХ рджреА рдЬрд╛рдПрдЧреА рдЗрд╕ case рдореЗрдВ components рдХреЗ рдмрд╛рдж рдкрдЯрдХ рджреА рдЧя┐╜я┐╜
6:07
рддреЛ рдЬреЛ tailwind рдХреА components layer рд╣реИ рдЙрд╕ layer рдХреЗ end рдореЗя┐╜я┐╜
6:11
рдЗрд╕рдиреЗ рдпрд╣ рдЪреАрдЬрд╝ рдЪреБрдкрдХрд╛ рджреА рддреЛ layer directive рдХреНрдпрд╛ рдХрд░рддреА рд╣реИ simply рдЬреЛ рднреА рдЖрдк рдЗрд╕рдХреЗ рдЕрдВрджрд░ рдбрд╛рд▓рддреЗ рд╣я┐╜я┐╜
6:15
рдЬрд┐рд╕ рднреА layer рдХреЗ рд▓рд┐рдП рд╡реЛ рдЙрд╕ layer рдХреЗ end рдореЗрдВ рдЪрд┐рдкрдХрд╛ рджреЗрддреА рд╣реИ рддреЛ components layer рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдмрди рдЪреБрдХрд╛ рд╣я┐╜я┐╜
6:21
рдЕрдм btn рддреЛ btn рдХреНрдпрд╛ рдмрди рдЪреБрдХрд╛ рд╣реИ components layer рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдмрди рдЪреБрдХрд╛ рд╣я┐╜я┐╜
6:25
рдпрд╛рд░ рдореИрдВ рдЗрд╕рдХреЛ рдирд╛ utilities рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдмрдирд╛рдирд╛ рдЪрд╛рддрд╛ рд╣реВрдБ рдореИрдВ BTN рдХреЛ рдПрдХ utility class рдХреЗ рддреМрд░ рдкрд░ use рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВя┐╜я┐╜
6:31
рдХрднреА-рдХрднреА рд╣реЛрдЧрд╛ рдХреНрдпрд╛ рдХрд┐ рдЖрдк рдХрд┐рд╕реА-рдХрд┐рд╕реА class рдХреЛ as a utility class рдмрдирд╛рдирд╛ рдЪрд╛рд╣реЗрдВрдЧя┐╜я┐╜
6:37
рдЬреЛ рдХрд┐ tailwind рдореЗрдВ automatically рдЖрдк рд▓реЛрдЧ рдХреЛ рдирд╣реАрдВ рдорд┐рд▓рддреА рд╣реИ рддреЛ рдЙрд╕ case рдореЗрдВ рдЖрдк рд▓реЛрдЧ рдХреНрдпрд╛ рдХрд░реЛрдЧя┐╜я┐╜
6:41
рдЙрд╕ case рдореЗрдВ рдЖрдк рд▓реЛрдЧ layer directive рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЛрдЧреЗ рдФрд░ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдХрд░реЛрдЧреЗ, рдЕрдм BTN рдореЗрд░реА utility class рд╣реИ, рдФрд░ рдпрд╣ utility layer рдХреЗ рдЕрдВрджрд░ рдЖрддреА рд╣реИ, рдЕрдЧрд░ рдореИрдВ рдЖрдк рд▓реЛрдЧреЛрдВ рдпрд╣рд╛рдБ рдкрд░ search рдХрд░рдХреЗ рджрд┐рдЦрд╛рдУ, рдЖрдкрдХреЛ рдЕрдЧрд░ рдореИрдВ search рдХрд░рдХреЗ рджрд┐рдЦрд╛рдУ, рддреЛ рдпрд╣ рдореЗрд░реА рд╕рд╛рд░реА utility classes рдХреЗ рдмрд╛рдж рдЖрдПрдЧреА, рдЕрдм рдЗрд╕рдХреЗ рдмрд╛рдж рдЬреЛ рд╣реИ, рдХреБрдЫ рднреА рдирд╣реАрдВ рд╣реИ, рдпрд╣ class class рд╣реИ, рдФрд░ рдЗрд╕рдХрд╛ reason рдпрд╣ рд╣реИ, рдХя┐╜я┐╜
7:14
course enjoy comment
7:26
рдЕрдм рдПрдХ рдЪреАрдЬ рдереА рдмрд╣реБрдд рд╕рд╛рд░реЗ рд▓реЛрдЧ рдкреВрдЫ рд░рд╣реЗ рдереЗ рдпрд╛ рдЬрд╛рджреВрдпреА trick рдЖрдкрдиреЗ рдмрддрд╛рдИ рдея┐╜я┐╜
7:45
рджреЗрдЦреЛ рдпрд╛ рдерд╛ рдХреНрдпрд╛ рдХрд┐ рдореИрдВрдиреЗ рдПрдХ рд╡рд╛рдпрд░ рдХрд╛ рдЯреБрдХрдбрд╝рд╛ рд▓рд┐рдпрд╛ рдерд╛ рдпреЗ ъ╣Ая┐╜s рдмреНрд▓реИрдХ рд╡рд╛рдпрд░ рд╣реИ рдореИрдВ рд╡рд╛рдЗрдЯ рд▓реЗрддрд╛ рд╣реВя┐╜я┐╜
7:49
рдареАрдХ рд╣реИ рдХрд╣рд╛рдБ рд╕реЗ рд▓рд╛рдУ рдореИрдВ рд╡рд╛рдЗрдЯ рд╡рд╛рдпрд░ рдпреЗ рд╣реИ рдореЗрд░рд╛ рдПрдпрд░рдлреЛрди рд╣реИ рдЗрд╕рд╕реЗ рдореИрдВ рдХрд░рддрд╛ рд╣реВя┐╜я┐╜
7:54
рдпрд╣ рдореИрдВрдиреЗ рд╡рд╛рдпрд░ рд▓рд┐рдпрд╛ рдерд╛ рдареАрдХ рд╣реИ рдорд╛рди рд▓реЛ рдореИрдВрдиреЗ рдпрд╣ рд╡рд╛рдпрд░ рд▓рд┐рдпрд╛ рдареАрдХ рд╣реИ рдореИрдВрдиреЗ рдХреНрдпрд╛ рдХрд┐рдпрд╛ рдерд╛ рдореИрдВрдиреЗ рдХрд╣рд╛ рдерд╛ рдХрд┐ рдореИрдВ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдлреЛрд▓реНрдб рдХрд░реВрдВрдЧрд╛ рдФрд░ рдореИрдВрдиреЗ рдРрд╕реЗ рдбрд╛рд▓рд╛ рдерд╛ рдФрд░ рдореИрдВрдиреЗ рдпрд╣рд╛рдВ рд╕реЗ рдХрдЯ рдХрд░ рджрд┐рдпрд╛ рдерд╛ рдФрд░ рдХрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рдХреБрдЫ рдЗрд╕рдХреЛ рдЕрдВрджрд░ рдбрд╛рд▓рд╛ рдерд╛ рдФрд░ рдлрд┐рд░ рдХреБрдЫ рдРрд╕реЗ рдХрд░рдХреЗ я┐╜я┐╜
8:24
рдРрд╕реЗ рдХрд░рдХреЗ рдФрд░ рдЬреЛ рд╡рд╛рдпрд░ рдерд╛ рдЬреИрд╕реЗ рдпреЗ рд╡рд╛рдпрд░ рд╣реИ рдпреЗ рд╡рд╛рдпрд░ рд╕реБрд░рдХреНрд╖рд┐рдд рдпрд╣рд╛рдБ рдкрд░ рдореЗрд░реЗ рд╣рд╛рде рдореЗрдВ рдмрди рдерд╛ рдЙрд╕ рдЯреБрдХрдбрд╝реЗ рдХреЛ рдХрд╛рдЯ рдХреЗ рдореИрдВрдиреЗ рдЙрд╕ рдЯреБрдХрдбрд╝реЗ рдХреЛ рдЕрдкрдиреЗ рд╣рд╛рде рдореЗрдВ рдбрд╛рд▓ рджрд┐рдпрд╛ рдлрд┐рд░ рдРрд╕реЗ рдХрд░рдХреЗ рдореИрдВрдиреЗ рдРрд╕реЗ рдЦреЗрдЪ рд▓рд┐рдпрд╛ рд╡реЛ рдЯреБрдХрдбрд╝рд╛ рднреА рдореЗрд░реЗ рд╣рд╛рде рдореЗрдВ рдерд╛ рдФрд░ рдореИрдВрдиреЗ рдРрд╕реЗ рдХрд░рдХреЗ рдия┐╜я┐╜
8:54
рддреЛ рд▓реЛ рдЗрдВрд╕реНрдкреЗрдХреНрдЯ рдХрд░ рд▓реЛ рдиреАрдЪреЗ рдХреЛрдИ рджреЗрдЦрдирд╛ рдирд╣реАрдВ рдЪрд╛рд╣рд┐рдП рдЖрдкрдХрд╛ рд╡рд╛рдпрд░ рджреЗрдЦрдирд╛ рдирд╣реАрдВ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдореИрдВрдиреЗ рдореИрдЬрд┐рдХ рдЯреНрд░рд┐рдХ рдХрд░реА рдея┐╜я┐╜
8:59
рдХреБрдЫ рдореИрдЬрд┐рдХрд┐рдпрдиреНрд╕ рдХреНрдпрд╛ рдХрд░рддреЗ рд╣реИрдВ рдХрд┐ рдЗрд╕реА рдЯреНрд░рд┐рдХ рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдЙрдирдХрд╛ рдЬреЛ рдмреИрдХрдбреНрд░реЙрдк рд╣реЛрддрд╛ рд╣я┐╜я┐╜
9:04
рдЙрдирдХреЗ рдкреАрдЫреЗ рдЬреЛ background рд╣реЛрддрд╛ рд╣реИ рд╡реЛ рдЙрд╕ wire рдХреЗ color рдХрд╛ рд╣реА рд╣реЛрддрд╛ рд╣реИ рддрдм рд╡реЛ рдРрд╕реЗ рдлреИрдХреНрдЯреЗ рд╣реИ рдЯреЗрдХреНрдирд┐рдХ рд╕я┐╜я┐╜
9:08
рддреЛ рдЙрдбрд╝рддреЗ рд╣реБрдЖ рд╡реЛ wire рджрд┐рдЦрддрд╛ рднреА рдирд╣реАрдВ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЙрд╕ wire рдХрд╛ color рдФрд░ back drop рдХрд╛ color same рд╣реЛрддрд╛ рд╣я┐╜я┐╜
9:12
рддреЛ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдЗрд╕ trick рдХреЛ perform рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧ рдЬрд╛рджреВрдИ shows рджреЗрдЦрддреЗ рд╣реИя┐╜я┐╜
9:17
рдЬреЛ рдХрд┐ рдмрдЪреНрдЪреЗ рджреЗрдЦрддреЗ рд╣реИрдВ рдмрдЪреНрдЪреЗ рдирд╣реАрдВ рдмрдбрд╝реЗ рднреА рджреЗрдЦ рд▓реЗрддреЗ рд╣реИрдВ рдЖрдЬ рдХрд▓ рдХрднреА рдХрднреА рддреЛ рдЖрдк рд▓реЛрдЧреЛрдВ рдкрджрд╛ рд╣реЛрдЧрд╛ рдореИрдВ рдХрд┐рд╕ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░ рд░рд╣рд╛ рд╣реВя┐╜я┐╜
9:22
so рдЕрднреА рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЗрддрдирд╛ рд╣реИ guys thank you so much guys for watching this video
9:26
and I will see you next time