title
Learn Tailwind CSS – Course for Beginners
description
This course will give you a full introduction into all of the core concepts of Tailwind CSS — it will also provide details on every features that provides Tailwindcss.
Course from @codewithguillaume .
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:36) Setup
⌨️ (0:17:01) Colors
⌨️ (0:29:11) Customization
⌨️ (0:42:11) Typography
⌨️ (1:05:21) Spaces & sizes
⌨️ (1:29:36) Flex
⌨️ (1:51:46) Grids
⌨️ (2:12:48) Layouts
⌨️ (2:37:49) Borders
⌨️ (2:45:41) Effects & filters
⌨️ (2:57:33) Animations
⌨️ (3:08:28) Design System
⌨️ (3:56:31) Core concepts
⌨️ (4:05:26) Dark mode
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
detail
{'title': 'Learn Tailwind CSS – Course for Beginners', 'heatmap': [{'end': 1817.642, 'start': 1662.546, 'weight': 0.7}, {'end': 2428.644, 'start': 2112.922, 'weight': 0.719}, {'end': 3179.591, 'start': 3022.965, 'weight': 0.906}, {'end': 4998.764, 'start': 4693.308, 'weight': 0.73}, {'end': 5907.915, 'start': 5743.017, 'weight': 0.715}, {'end': 6207.691, 'start': 6055.08, 'weight': 0.918}, {'end': 8480.189, 'start': 8323.07, 'weight': 0.816}], 'summary': 'A comprehensive tailwind css course for beginners covers installation, customization, typography, text manipulation, spacing, layout organization, grid, css effects, design, animation, transitions, and input styling with practical examples and quantifiable data.', 'chapters': [{'end': 708.754, 'segs': [{'end': 29.244, 'src': 'embed', 'start': 0.369, 'weight': 0, 'content': [{'end': 8.113, 'text': 'In this course, Guillaume will teach you how to use the tailwind CSS framework to create web applications faster and easier.', 'start': 0.369, 'duration': 7.744}, {'end': 15.516, 'text': 'Guillaume has been a front end developer for 10 years, and he has created many courses on Udemy and his own YouTube channel.', 'start': 8.653, 'duration': 6.863}, {'end': 19.538, 'text': 'hello everybody and welcome to this course about tailwind css.', 'start': 15.896, 'duration': 3.642}, {'end': 29.244, 'text': "my name is guillaume and today i'm going to introduce you to this amazing css framework made to create design for front-end application.", 'start': 19.538, 'duration': 9.706}], 'summary': 'Guillaume teaches tailwind css for faster web app creation.', 'duration': 28.875, 'max_score': 0.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao369.jpg'}, {'end': 77.679, 'src': 'embed', 'start': 41.614, 'weight': 1, 'content': [{'end': 44.398, 'text': "However, it's recommended to have some basis.", 'start': 41.614, 'duration': 2.784}, {'end': 53.409, 'text': 'By the end of this entire demonstration, you will be able to use Tailwind CSS to create your own custom design system.', 'start': 45.139, 'duration': 8.27}, {'end': 55.37, 'text': 'Here is the program of our course.', 'start': 53.689, 'duration': 1.681}, {'end': 64.113, 'text': 'We are going to learn how to deal with color at first because Tailwind CSS is providing to us a full set of colors that are very useful.', 'start': 55.69, 'duration': 8.423}, {'end': 68.675, 'text': 'Then we are going to see how to customize your design.', 'start': 64.693, 'duration': 3.982}, {'end': 77.679, 'text': 'Because yes, with Tailwind CSS, what is amazing is that there is a powerful engine of customization that helps you to customize everything.', 'start': 68.715, 'duration': 8.964}], 'summary': 'Learn to use tailwind css to create custom design system, with focus on colors and customization.', 'duration': 36.065, 'max_score': 41.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao41614.jpg'}, {'end': 235.495, 'src': 'embed', 'start': 175.609, 'weight': 3, 'content': [{'end': 182.695, 'text': 'You can install Tailwind everywhere you want to do front-end, or either you want to do an HTML, a single HTML file.', 'start': 175.609, 'duration': 7.086}, {'end': 183.936, 'text': "It's also working.", 'start': 182.815, 'duration': 1.121}, {'end': 193.765, 'text': 'When we go on tailwindcss.com, we quickly understand that Terrain CSS is providing to us already CSS written.', 'start': 184.376, 'duration': 9.389}, {'end': 206.637, 'text': 'So basically here we got classes that we apply to an HTML file or UI element, whatever, and we see that the design is dynamically updated.', 'start': 194.205, 'duration': 12.432}, {'end': 217.082, 'text': 'So, basically, the tailwind css core team already write all the css we need and that we use most of the time to create element,', 'start': 207.138, 'duration': 9.944}, {'end': 220.903, 'text': "so we don't waste time on writing css.", 'start': 217.082, 'duration': 3.821}, {'end': 222.804, 'text': "it's already here, so why not use it?", 'start': 220.903, 'duration': 1.901}, {'end': 227.868, 'text': 'so there are several ways to install tailwind.', 'start': 223.604, 'duration': 4.264}, {'end': 232.352, 'text': 'so you can use the cli provided by tailwind itself.', 'start': 227.868, 'duration': 4.484}, {'end': 235.495, 'text': "it's the tool that helps you to install everything.", 'start': 232.352, 'duration': 3.143}], 'summary': 'Tailwind css provides pre-written css classes for easy installation and dynamic updates, saving time on writing css.', 'duration': 59.886, 'max_score': 175.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao175609.jpg'}, {'end': 336.317, 'src': 'embed', 'start': 314.083, 'weight': 5, 'content': [{'end': 325.148, 'text': 'It means that here in my tailwind.config.js, I can do a lot of configuration on colors, spacing, typography, font, family, whatever.', 'start': 314.083, 'duration': 11.065}, {'end': 336.317, 'text': 'that will help me to, on the fly, rebuild my css library and get my own customization available inside tailwind.', 'start': 325.148, 'duration': 11.169}], 'summary': 'Tailwind.config.js allows for extensive customization of css library on the fly.', 'duration': 22.234, 'max_score': 314.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao314083.jpg'}, {'end': 566.399, 'src': 'embed', 'start': 536.836, 'weight': 6, 'content': [{'end': 545.662, 'text': "Utility classes, it's classes already provided by Tailwind CSS to give the same result but without writing any CSS.", 'start': 536.836, 'duration': 8.826}, {'end': 556.611, 'text': 'If you want to use Flexbox padding max width, margin, background color, border, radius width, height,', 'start': 546.602, 'duration': 10.009}, {'end': 566.399, 'text': 'flex whatever you can relate to the Tailwind CSS documentation and just add your classes this way.', 'start': 556.611, 'duration': 9.788}], 'summary': 'Tailwind css provides utility classes for flexbox, padding, max width, margin, background color, border, radius, width, and height, allowing the same results without writing any css.', 'duration': 29.563, 'max_score': 536.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao536836.jpg'}], 'start': 0.369, 'title': 'Tailwind css and its installation', 'summary': 'Covers comprehensive course on utilizing tailwind css to create web applications, covering color customization, typography, layout creation, and core concepts, taught by a 10-year front end developer with the final goal of designing a custom system and implementing dark mode. it also includes installation methods such as cli, framework guides, and cdn, and highlights the use of utility classes for faster and lighter codebase, predefined design system, and responsive design capabilities.', 'chapters': [{'end': 175.589, 'start': 0.369, 'title': 'Tailwind css for web applications', 'summary': 'Covers a comprehensive course on utilizing tailwind css to create web applications, including topics like color customization, typography, layout creation, and core concepts, taught by a 10-year front end developer, with the final goal of designing a custom system and implementing dark mode.', 'duration': 175.22, 'highlights': ["Guillaume, a 10-year front end developer, will teach how to use Tailwind CSS to create web applications faster and easier. Guillaume's expertise and experience provide credibility to the course content.", 'The course covers dealing with color, customizing design, typography, margins, padding, flex, grids, layouts, borders, effects, filters, animation, transition, and core concepts of Tailwind CSS. The course covers a wide range of topics essential for creating a custom design system using Tailwind CSS.', 'The final goal is to create a custom design system and implement dark mode using Tailwind CSS. The course aims to guide learners in creating their own design system and implementing dark mode.']}, {'end': 708.754, 'start': 175.609, 'title': 'Installing tailwind css and utilizing utility classes', 'summary': 'Covers the installation of tailwind css, including methods such as cli, framework guides, and cdn, and highlights the use of utility classes for faster and lighter codebase, predefined design system, and responsive design capabilities.', 'duration': 533.145, 'highlights': ['Tailwind CSS provides pre-written CSS classes, enabling dynamic design updates and facilitating faster development without writing additional CSS. Tailwind CSS provides pre-written CSS classes, enabling dynamic design updates and facilitating faster development without writing additional CSS.', 'Various installation methods for Tailwind include using the CLI provided by Tailwind, framework guides such as Next.js, and implementation via CDN for single HTML files or email templates. Various installation methods for Tailwind include using the CLI provided by Tailwind, framework guides such as Next.js, and implementation via CDN for single HTML files or email templates.', 'Customization of Tailwind CSS can be done through the tailwind.config.js file, allowing adjustments to colors, spacing, typography, font, and other elements, enabling the creation of a personalized CSS library. Customization of Tailwind CSS can be done through the tailwind.config.js file, allowing adjustments to colors, spacing, typography, font, and other elements, enabling the creation of a personalized CSS library.', 'Utility classes provided by Tailwind CSS allow for faster development with a lighter codebase, responsive design capabilities, and modifiers for hover, focus, and other CSS elements. Utility classes provided by Tailwind CSS allow for faster development with a lighter codebase, responsive design capabilities, and modifiers for hover, focus, and other CSS elements.']}], 'duration': 708.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao369.jpg', 'highlights': ["Guillaume, a 10-year front end developer, will teach how to use Tailwind CSS to create web applications faster and easier. Guillaume's expertise and experience provide credibility to the course content.", 'The course covers dealing with color, customizing design, typography, margins, padding, flex, grids, layouts, borders, effects, filters, animation, transition, and core concepts of Tailwind CSS. The course covers a wide range of topics essential for creating a custom design system using Tailwind CSS.', 'The final goal is to create a custom design system and implement dark mode using Tailwind CSS. The course aims to guide learners in creating their own design system and implementing dark mode.', 'Tailwind CSS provides pre-written CSS classes, enabling dynamic design updates and facilitating faster development without writing additional CSS.', 'Various installation methods for Tailwind include using the CLI provided by Tailwind, framework guides such as Next.js, and implementation via CDN for single HTML files or email templates.', 'Customization of Tailwind CSS can be done through the tailwind.config.js file, allowing adjustments to colors, spacing, typography, font, and other elements, enabling the creation of a personalized CSS library.', 'Utility classes provided by Tailwind CSS allow for faster development with a lighter codebase, responsive design capabilities, and modifiers for hover, focus, and other CSS elements.']}, {'end': 2527.911, 'segs': [{'end': 829.963, 'src': 'embed', 'start': 769.319, 'weight': 0, 'content': [{'end': 778.386, 'text': 'You can add several different color schema to your Tailwind theme and you can use of course the dark mode.', 'start': 769.319, 'duration': 9.067}, {'end': 780.007, 'text': "Here we've got an example.", 'start': 778.906, 'duration': 1.101}, {'end': 786.652, 'text': 'we can say that in dark mode, I want to change a color background and I just had a dark on top of it.', 'start': 780.007, 'duration': 6.645}, {'end': 797.338, 'text': "okay?. And that's amazing, because Tailwind CSS really hacked this thing of having a dark mode into your application or website.", 'start': 786.652, 'duration': 10.686}, {'end': 799.98, 'text': 'Personally, I use it all the time.', 'start': 797.819, 'duration': 2.161}, {'end': 806.704, 'text': "However, the real force for me of Tailwind CSS, it's its customization system.", 'start': 800.26, 'duration': 6.444}, {'end': 813.57, 'text': 'With Tailwind CSS, you can customize all of it, all your framework.', 'start': 807.845, 'duration': 5.725}, {'end': 819.535, 'text': 'Actually, you can customize your team through a tailwind.config.js file.', 'start': 813.77, 'duration': 5.765}, {'end': 829.963, 'text': 'Because Tailwind is like an engine that will understand what sizes, what colors, what font family, what borders you want to use,', 'start': 820.055, 'duration': 9.908}], 'summary': 'Tailwind css allows easy customization of color schemes and dark mode, with the ability to customize all framework components and styles through a tailwind.config.js file.', 'duration': 60.644, 'max_score': 769.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao769319.jpg'}, {'end': 934.123, 'src': 'embed', 'start': 907.17, 'weight': 16, 'content': [{'end': 916.655, 'text': 'Here we are targeting the layer base after importing Tailwind and we can apply with the decorator at and apply the directive.', 'start': 907.17, 'duration': 9.485}, {'end': 924.398, 'text': 'We can say, hey, I want to create a class, but I want that this class is using an existing Tailwind class.', 'start': 917.115, 'duration': 7.283}, {'end': 926.739, 'text': 'You can do it with apply.', 'start': 924.798, 'duration': 1.941}, {'end': 934.123, 'text': 'You can go deeper by creating also your component directly and using the directive and function theme.', 'start': 927.64, 'duration': 6.483}], 'summary': 'Targeting layer base, importing tailwind, applying decorator, creating components, using directives and functions.', 'duration': 26.953, 'max_score': 907.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao907170.jpg'}, {'end': 1048.396, 'src': 'embed', 'start': 1013.621, 'weight': 2, 'content': [{'end': 1026.303, 'text': "that's an example on how far you can go to write css with tailwind and how far you can customize it.", 'start': 1013.621, 'duration': 12.682}, {'end': 1027.563, 'text': "let's start by the colors.", 'start': 1026.303, 'duration': 1.26}, {'end': 1039.296, 'text': 'tailwind css give us a big palette since the beginning, so we can start with these colors already provided by Tailwind.', 'start': 1027.563, 'duration': 11.733}, {'end': 1048.396, 'text': "And which is cool here, is that we've got, for instance, this slate color there and we've got different gradients, okay?", 'start': 1040.136, 'duration': 8.26}], 'summary': 'Tailwind css offers a wide range of colors and gradients for customization.', 'duration': 34.775, 'max_score': 1013.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao1013621.jpg'}, {'end': 1368.053, 'src': 'embed', 'start': 1339.212, 'weight': 5, 'content': [{'end': 1348.66, 'text': "tailwind is going to create the classes it only needs, which means at the end you will not have a big css file that you don't use or you only use 10,", 'start': 1339.212, 'duration': 9.448}, {'end': 1349.241, 'text': 'you will use 100.', 'start': 1348.66, 'duration': 0.581}, {'end': 1355.926, 'text': 'that is provided in here and all the main stuff that you really need.', 'start': 1349.241, 'duration': 6.685}, {'end': 1357.828, 'text': 'so this was for the text color.', 'start': 1355.926, 'duration': 1.902}, {'end': 1364.952, 'text': "but let's say that we want to put a background which is amazing with Tailwind.", 'start': 1358.528, 'duration': 6.424}, {'end': 1368.053, 'text': "it's that it always works the same way.", 'start': 1364.952, 'duration': 3.101}], 'summary': 'Tailwind creates only necessary classes, reducing unused css, and ensuring efficient use of resources.', 'duration': 28.841, 'max_score': 1339.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao1339212.jpg'}, {'end': 1817.642, 'src': 'heatmap', 'start': 1662.546, 'weight': 0.7, 'content': [{'end': 1673.248, 'text': 'otherwise I need to put those colors into extend, because extend is the option to say, okay, I keep the original tailwind library,', 'start': 1662.546, 'duration': 10.702}, {'end': 1678.349, 'text': 'but I want to add this, this, this on top of it so I can take colors there,', 'start': 1673.248, 'duration': 5.101}, {'end': 1687.911, 'text': 'go to extend and put my colors inside of it instead of having on the top of theme and when I get back I got my colors back.', 'start': 1678.349, 'duration': 9.562}, {'end': 1698.597, 'text': 'so what i can do here directly is to go inside my app folder there and go to my page and instead of having this,', 'start': 1688.451, 'duration': 10.146}, {'end': 1712.065, 'text': "this text yellow 600 i'm going to put text vue js and here look intellisense understood that we want this green color and when i update i got my own color.", 'start': 1698.597, 'duration': 13.468}, {'end': 1719.955, 'text': 'so this is how it works to get the customization colors that we need.', 'start': 1712.065, 'duration': 7.89}, {'end': 1724.676, 'text': 'and of course, inside this vgs we could do the same as tailwind.', 'start': 1719.955, 'duration': 4.721}, {'end': 1727.657, 'text': 'we could say that 100 is this color.', 'start': 1724.676, 'duration': 2.981}, {'end': 1735.699, 'text': 'okay, but we could say, for instance, that 932 is the uh is another color.', 'start': 1727.657, 'duration': 8.042}, {'end': 1738.44, 'text': "let's say, yes, there we go,", 'start': 1735.699, 'duration': 2.741}, {'end': 1755.099, 'text': "let's say it's this one and when i will use that there i can do text vgs 100 with this color and also i can use the other color with my own key that i created inside my extend there.", 'start': 1738.44, 'duration': 16.659}, {'end': 1770.018, 'text': 'On the official documentation of Tailwind on the customization side, we see that we can configure the customization.', 'start': 1760.347, 'duration': 9.671}, {'end': 1777.147, 'text': 'We can also customize the content, our themes, the screens, the colors, the spacing.', 'start': 1770.539, 'duration': 6.608}, {'end': 1779.91, 'text': 'We can add plugins and presets.', 'start': 1777.647, 'duration': 2.263}, {'end': 1793.74, 'text': 'And if we start by the main file of Tailwind, which is tailwind.config.js, we see down there that we can configure the colors, the font family,', 'start': 1781.051, 'duration': 12.689}, {'end': 1796.562, 'text': 'but also the spacing, the border radius, etc.', 'start': 1793.74, 'duration': 2.822}, {'end': 1804.414, 'text': ', etc Tailwind CSS is using classes to refer to CSS.', 'start': 1796.562, 'duration': 7.852}, {'end': 1809.237, 'text': 'And this CSS is actually generated on the fly.', 'start': 1804.594, 'duration': 4.643}, {'end': 1817.642, 'text': 'So on the tailwind.config.js file, you can write as keys of these objects.', 'start': 1809.757, 'duration': 7.885}], 'summary': 'Using tailwind, customize colors, themes, and more for efficient css generation.', 'duration': 155.096, 'max_score': 1662.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao1662546.jpg'}, {'end': 1809.237, 'src': 'embed', 'start': 1777.647, 'weight': 8, 'content': [{'end': 1779.91, 'text': 'We can add plugins and presets.', 'start': 1777.647, 'duration': 2.263}, {'end': 1793.74, 'text': 'And if we start by the main file of Tailwind, which is tailwind.config.js, we see down there that we can configure the colors, the font family,', 'start': 1781.051, 'duration': 12.689}, {'end': 1796.562, 'text': 'but also the spacing, the border radius, etc.', 'start': 1793.74, 'duration': 2.822}, {'end': 1804.414, 'text': ', etc Tailwind CSS is using classes to refer to CSS.', 'start': 1796.562, 'duration': 7.852}, {'end': 1809.237, 'text': 'And this CSS is actually generated on the fly.', 'start': 1804.594, 'duration': 4.643}], 'summary': 'Tailwind css allows configuring colors, font family, spacing, and border radius using classes generated on the fly.', 'duration': 31.59, 'max_score': 1777.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao1777647.jpg'}, {'end': 1958.707, 'src': 'embed', 'start': 1929.043, 'weight': 10, 'content': [{'end': 1941.835, 'text': "what i can do with tailwind is that i can say that I want to have text SM, but when I'm on LG, so when I'm on a large screen semicolon,", 'start': 1929.043, 'duration': 12.792}, {'end': 1943.517, 'text': 'I want to have text LG.', 'start': 1941.835, 'duration': 1.682}, {'end': 1952.024, 'text': 'OK, so here text SM will be applied to all the sizes of the screen that are lower to LG.', 'start': 1944.117, 'duration': 7.907}, {'end': 1958.707, 'text': 'And if I go to my tailwind.config.js, I can add the example that I have there on my team.', 'start': 1952.765, 'duration': 5.942}], 'summary': 'Tailwind allows responsive text sizing based on screen size.', 'duration': 29.664, 'max_score': 1929.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao1929043.jpg'}, {'end': 2428.644, 'src': 'heatmap', 'start': 2112.922, 'weight': 0.719, 'content': [{'end': 2127.666, 'text': 'so if i go here and I put my object there with this, this spacing would be applied to all classes that are calling as an argument the spacing.', 'start': 2112.922, 'duration': 14.744}, {'end': 2135.089, 'text': 'Here we got two sentences and we want to put some space under the first sentence.', 'start': 2128.087, 'duration': 7.002}, {'end': 2140.211, 'text': 'When I go to my page, I apply a margin bottom of one.', 'start': 2135.529, 'duration': 4.682}, {'end': 2147.779, 'text': 'To understand how to add margin, padding, and spaces, please refer to the video Spaces.', 'start': 2140.931, 'duration': 6.848}, {'end': 2158.448, 'text': 'In my tailoring.config.js, I said that the spacing 1 that I applied here as an argument of the class is eight pixel.', 'start': 2148.079, 'duration': 10.369}, {'end': 2166.831, 'text': "But just for the example, let's put 100 pixel and let's get back to our application and updating.", 'start': 2159.209, 'duration': 7.622}, {'end': 2171.733, 'text': 'And here we see that now the spacing with one is of 100 pixel.', 'start': 2167.271, 'duration': 4.462}, {'end': 2179.535, 'text': 'So you can build your entire system of spacing with Tailwind.', 'start': 2172.293, 'duration': 7.242}, {'end': 2189.161, 'text': 'And this is really amazing because Tailwind is by nature providing already made spacing grid.', 'start': 2179.675, 'duration': 9.486}, {'end': 2198.583, 'text': 'But actually, if you have a different vision and if the design system that has been given to you by a graphic designer, for instance,', 'start': 2189.601, 'duration': 8.982}, {'end': 2205.144, 'text': 'is different from Tailwind, actually you can build a new design system directly there,', 'start': 2198.583, 'duration': 6.561}, {'end': 2210.505, 'text': 'with your own spacing way deeper into the customization possibilities.', 'start': 2205.144, 'duration': 5.361}, {'end': 2216.37, 'text': 'with tailwind, you can create what we call plugins and plugins.', 'start': 2211.525, 'duration': 4.845}, {'end': 2225.92, 'text': "it's some kind of helpers that helps you to create style sheets with javascript, so it can be useful in many, many situations.", 'start': 2216.37, 'duration': 9.55}, {'end': 2235.867, 'text': 'If you want to create some elements such add utilities such as components, match component, add base,', 'start': 2226.52, 'duration': 9.347}, {'end': 2244.914, 'text': "add variants let's say that you want to go way deeper into the work of a front end developer and create really really specific design.", 'start': 2235.867, 'duration': 9.047}, {'end': 2247.576, 'text': 'you would need to create what we call a plugin.', 'start': 2244.914, 'duration': 2.662}, {'end': 2249.077, 'text': 'What are arbitrary values??', 'start': 2247.596, 'duration': 1.481}, {'end': 2258.984, 'text': "Well, it's values that you can directly inject into the css class that you got there.", 'start': 2249.598, 'duration': 9.386}, {'end': 2260.725, 'text': "so let's take an example.", 'start': 2258.984, 'duration': 1.741}, {'end': 2266.749, 'text': "let's take this background color there, which is not part of my customization file.", 'start': 2260.725, 'duration': 6.024}, {'end': 2271.772, 'text': 'okay, i just put that and we see that intellisense already recognize the color.', 'start': 2266.749, 'duration': 5.023}, {'end': 2276.035, 'text': 'okay, and when i save and i get back to the app, there we go.', 'start': 2271.772, 'duration': 4.263}, {'end': 2278.356, 'text': 'my color has been applied.', 'start': 2276.035, 'duration': 2.321}, {'end': 2292.506, 'text': 'so these arbitrary values are values that you use, not necessarily everywhere, but you set up directly inside the current css class there.', 'start': 2278.356, 'duration': 14.15}, {'end': 2294.027, 'text': "and that's what is cool.", 'start': 2292.506, 'duration': 1.521}, {'end': 2305.653, 'text': 'with tailwind, we can also build on the fly like this without registering all the values that we want to customize inside tailwind.config.js.', 'start': 2294.807, 'duration': 10.846}, {'end': 2314.698, 'text': 'we can build our design system like this directly inline, what we call inline style directly into the html using tailwind.', 'start': 2305.653, 'duration': 9.045}, {'end': 2321.923, 'text': 'css is amazing because it provides to us a lot of classes already written CSS that we can use.', 'start': 2314.698, 'duration': 7.225}, {'end': 2326.927, 'text': 'But do we really need to never write CSS? Sometimes we do.', 'start': 2322.104, 'duration': 4.823}, {'end': 2328.208, 'text': 'We need to write CSS.', 'start': 2327.087, 'duration': 1.121}, {'end': 2331.431, 'text': 'Tailwind is providing to us a directive called layer.', 'start': 2328.468, 'duration': 2.963}, {'end': 2336.755, 'text': "So when I go to my global.css file, and I'm going to close all of this to be clear.", 'start': 2332.051, 'duration': 4.704}, {'end': 2337.235, 'text': 'There we go.', 'start': 2336.955, 'duration': 0.28}, {'end': 2348.161, 'text': 'we can apply layer, okay? Layer is a directive that help us to write CSS for a certain scope.', 'start': 2338.533, 'duration': 9.628}, {'end': 2352.244, 'text': 'Up there, we imported actually Tailwind already.', 'start': 2348.861, 'duration': 3.383}, {'end': 2354.486, 'text': 'So layer here is available there.', 'start': 2352.604, 'duration': 1.882}, {'end': 2358.211, 'text': 'And down there we see that layer.', 'start': 2355.106, 'duration': 3.105}, {'end': 2363.095, 'text': 'okay, can add style to tailwind base component and utilities.', 'start': 2358.211, 'duration': 4.884}, {'end': 2376.005, 'text': 'and remember, base component and utilities are on the top, they are imported and i can overwrite here on by typing layer base that i want to have.', 'start': 2363.095, 'duration': 12.91}, {'end': 2382.589, 'text': "we could do there background color, yes, and let's put, for instance, lime.", 'start': 2376.005, 'duration': 6.584}, {'end': 2385.852, 'text': "all right, if i get back to my app, what's gonna happen?", 'start': 2382.589, 'duration': 3.263}, {'end': 2389.725, 'text': 'I go here, I update and there we go.', 'start': 2387.202, 'duration': 2.523}, {'end': 2393.729, 'text': "We've got the color that has been applied there.", 'start': 2389.825, 'duration': 3.904}, {'end': 2401.753, 'text': 'Instead of writing this, I can use apply, apply directive.', 'start': 2393.87, 'duration': 7.883}, {'end': 2409.28, 'text': 'help me to call, actually to call, the classes that are provided by tailwind.', 'start': 2401.753, 'duration': 7.527}, {'end': 2413.563, 'text': 'so here we see that i have an apply text to excel.', 'start': 2409.28, 'duration': 4.283}, {'end': 2417.166, 'text': "but let's say that we want to do apply bg.", 'start': 2413.563, 'duration': 3.603}, {'end': 2420.589, 'text': "and let's say bg, let's put a gray slate.", 'start': 2417.166, 'duration': 3.423}, {'end': 2428.644, 'text': "there we go and i'm going to say like this I'm going to get back there and remove this class that I had previously removing it.", 'start': 2420.589, 'duration': 8.055}], 'summary': 'Tailwind css allows for easy customization of spacing, arbitrary values, and inline styles.', 'duration': 315.722, 'max_score': 2112.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2112922.jpg'}, {'end': 2171.733, 'src': 'embed', 'start': 2140.931, 'weight': 11, 'content': [{'end': 2147.779, 'text': 'To understand how to add margin, padding, and spaces, please refer to the video Spaces.', 'start': 2140.931, 'duration': 6.848}, {'end': 2158.448, 'text': 'In my tailoring.config.js, I said that the spacing 1 that I applied here as an argument of the class is eight pixel.', 'start': 2148.079, 'duration': 10.369}, {'end': 2166.831, 'text': "But just for the example, let's put 100 pixel and let's get back to our application and updating.", 'start': 2159.209, 'duration': 7.622}, {'end': 2171.733, 'text': 'And here we see that now the spacing with one is of 100 pixel.', 'start': 2167.271, 'duration': 4.462}], 'summary': 'In tailoring.config.js, spacing 1 is changed from 8px to 100px.', 'duration': 30.802, 'max_score': 2140.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2140931.jpg'}, {'end': 2260.725, 'src': 'embed', 'start': 2205.144, 'weight': 3, 'content': [{'end': 2210.505, 'text': 'with your own spacing way deeper into the customization possibilities.', 'start': 2205.144, 'duration': 5.361}, {'end': 2216.37, 'text': 'with tailwind, you can create what we call plugins and plugins.', 'start': 2211.525, 'duration': 4.845}, {'end': 2225.92, 'text': "it's some kind of helpers that helps you to create style sheets with javascript, so it can be useful in many, many situations.", 'start': 2216.37, 'duration': 9.55}, {'end': 2235.867, 'text': 'If you want to create some elements such add utilities such as components, match component, add base,', 'start': 2226.52, 'duration': 9.347}, {'end': 2244.914, 'text': "add variants let's say that you want to go way deeper into the work of a front end developer and create really really specific design.", 'start': 2235.867, 'duration': 9.047}, {'end': 2247.576, 'text': 'you would need to create what we call a plugin.', 'start': 2244.914, 'duration': 2.662}, {'end': 2249.077, 'text': 'What are arbitrary values??', 'start': 2247.596, 'duration': 1.481}, {'end': 2258.984, 'text': "Well, it's values that you can directly inject into the css class that you got there.", 'start': 2249.598, 'duration': 9.386}, {'end': 2260.725, 'text': "so let's take an example.", 'start': 2258.984, 'duration': 1.741}], 'summary': 'Tailwind allows for deep customization with plugins, including creating specific design elements and injecting arbitrary values into css classes.', 'duration': 55.581, 'max_score': 2205.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2205144.jpg'}, {'end': 2352.244, 'src': 'embed', 'start': 2292.506, 'weight': 14, 'content': [{'end': 2294.027, 'text': "and that's what is cool.", 'start': 2292.506, 'duration': 1.521}, {'end': 2305.653, 'text': 'with tailwind, we can also build on the fly like this without registering all the values that we want to customize inside tailwind.config.js.', 'start': 2294.807, 'duration': 10.846}, {'end': 2314.698, 'text': 'we can build our design system like this directly inline, what we call inline style directly into the html using tailwind.', 'start': 2305.653, 'duration': 9.045}, {'end': 2321.923, 'text': 'css is amazing because it provides to us a lot of classes already written CSS that we can use.', 'start': 2314.698, 'duration': 7.225}, {'end': 2326.927, 'text': 'But do we really need to never write CSS? Sometimes we do.', 'start': 2322.104, 'duration': 4.823}, {'end': 2328.208, 'text': 'We need to write CSS.', 'start': 2327.087, 'duration': 1.121}, {'end': 2331.431, 'text': 'Tailwind is providing to us a directive called layer.', 'start': 2328.468, 'duration': 2.963}, {'end': 2336.755, 'text': "So when I go to my global.css file, and I'm going to close all of this to be clear.", 'start': 2332.051, 'duration': 4.704}, {'end': 2337.235, 'text': 'There we go.', 'start': 2336.955, 'duration': 0.28}, {'end': 2348.161, 'text': 'we can apply layer, okay? Layer is a directive that help us to write CSS for a certain scope.', 'start': 2338.533, 'duration': 9.628}, {'end': 2352.244, 'text': 'Up there, we imported actually Tailwind already.', 'start': 2348.861, 'duration': 3.383}], 'summary': 'Tailwind allows for inline style customization, with the capability to write css using the layer directive.', 'duration': 59.738, 'max_score': 2292.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2292506.jpg'}, {'end': 2527.911, 'src': 'embed', 'start': 2499.744, 'weight': 17, 'content': [{'end': 2509.746, 'text': 'Another function that I should mention here is that you can use multiple CSS files and by that you can mention them in your post CSS import.', 'start': 2499.744, 'duration': 10.002}, {'end': 2514.568, 'text': "If you don't want to write CSS, you can focus on writing plugins.", 'start': 2510.147, 'duration': 4.421}, {'end': 2523.03, 'text': 'So as I told you, plugins are JavaScript functions basically that will help you to write CSS by JavaScript.', 'start': 2514.988, 'duration': 8.042}, {'end': 2527.911, 'text': 'You can find it here on writing plugins on the official documentation.', 'start': 2523.39, 'duration': 4.521}], 'summary': 'You can use multiple css files and javascript plugins to write css.', 'duration': 28.167, 'max_score': 2499.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2499744.jpg'}], 'start': 708.754, 'title': 'Tailwind css customization and usage', 'summary': 'Covers tailwind css customization including targeting elements, working with pseudo elements, dark mode, and extensive customization options through the tailwind.config.js file. it also discusses the ease of applying colors, text styles, backgrounds, and borders using predefined classes, customizing colors, text, spacing, and applying inline styles directly into html.', 'chapters': [{'end': 1048.396, 'start': 708.754, 'title': 'Tailwind css customization', 'summary': 'Covers the customization capabilities of tailwind css including targeting elements, working with pseudo elements, dark mode, and extensive customization options through the tailwind.config.js file, with a focus on colors and creating custom utilities and classes.', 'duration': 339.642, 'highlights': ['Tailwind CSS customization system allows for extensive customization through the tailwind.config.js file, enabling the creation of custom themes with specific colors and dynamic generation of related styles. Tailwind CSS provides the ability to customize the framework extensively through the tailwind.config.js file, allowing the creation of custom themes with specific colors and dynamic generation of related styles.', 'Tailwind CSS facilitates the use of dark mode by enabling the addition of multiple color schemes to the theme, allowing for easy implementation of dark mode in applications or websites. Tailwind CSS supports the implementation of dark mode by enabling the addition of multiple color schemes to the theme, providing easy implementation of dark mode in applications or websites.', 'Tailwind CSS provides a wide range of pre-defined colors and gradients, and allows for the creation of custom colors to be dynamically generated into related styles. Tailwind CSS offers a wide range of pre-defined colors and gradients, and allows for the creation of custom colors to be dynamically generated into related styles.', 'Tailwind CSS enables the creation of custom utilities and classes, providing the ability to stack base Tailwind classes with custom elements and designs for reusability and efficiency. Tailwind CSS allows the creation of custom utilities and classes, enabling the stacking of base Tailwind classes with custom elements and designs for reusability and efficiency.', 'Tailwind CSS allows for the writing of plugins in JavaScript to modify base components and utilities, providing extensive options for customizing the framework. Tailwind CSS offers the option to write plugins in JavaScript to modify base components and utilities, providing extensive options for customizing the framework.']}, {'end': 1505.734, 'start': 1048.818, 'title': 'Understanding tailwind css', 'summary': 'Discusses how tailwind css makes it easy to apply colors, text styles, backgrounds, and borders by using predefined classes, such as text-green-600 and bg-green-600, resulting in a streamlined and efficient css file.', 'duration': 456.916, 'highlights': ['Tailwind CSS creates classes for specific colors and properties, such as text-green-600 and bg-green-600, resulting in a streamlined CSS file that only includes the necessary classes, enhancing efficiency. Tailwind CSS generates specific classes like text-green-600 and bg-green-600, leading to a leaner CSS file by including only essential classes, ensuring efficiency.', 'Tailwind CSS provides predefined classes for applying colors, text styles, backgrounds, and borders, simplifying the process of styling elements within the application. Tailwind CSS offers preset classes for color application, text styles, backgrounds, and borders, simplifying the styling process for application elements.', "The predefined classes in Tailwind CSS, such as text-green-600 and bg-green-600, allow for easy application of colors, text styles, backgrounds, and borders, streamlining the styling process. Tailwind CSS's predefined classes like text-green-600 and bg-green-600 enable effortless application of colors, text styles, backgrounds, and borders, streamlining the styling process."]}, {'end': 1907.905, 'start': 1507.842, 'title': 'Customizing colors in tailwind css', 'summary': 'Explains how to customize colors in tailwind css, demonstrating the process of adding custom colors to the tailwind.config.js file and utilizing them in the application. it also discusses the ability to configure other aspects such as themes, screens, spacing, and font families.', 'duration': 400.063, 'highlights': ['Customizing Colors in tailwind.config.js Demonstrates adding custom colors to the tailwind.config.js file, enabling the use of custom colors in the application, overriding the default colors.', 'Configuring Themes, Screens, Spacing, and Font Families Explains the ability to customize themes, screens, spacing, and font families in Tailwind CSS, showcasing the flexibility of the framework.', 'Utilizing Classes to Generate CSS on the Fly Describes how Tailwind CSS generates CSS classes on the fly based on the configuration in the tailwind.config.js file, allowing customization of spacing, font families, and other design elements.']}, {'end': 2292.506, 'start': 1907.905, 'title': 'Tailwind css: customizing text and spacing', 'summary': 'Explains how to customize text sizes and spacing in tailwind css, demonstrating the ability to set different text sizes for various screen sizes and configure spacing with specific pixel values, highlighting the flexibility and customization options available in tailwind css.', 'duration': 384.601, 'highlights': ["Demonstrates the ability to set different text sizes for various screen sizes, with the example of setting text size 'SM' for all screen sizes lower than 'LG' and 'LG' for larger screens, showcasing the responsive design capabilities of Tailwind CSS. ", 'Illustrates the customization of spacing by setting specific pixel values for spacing classes, showcasing the flexibility to define a custom spacing system in Tailwind CSS. ', 'Explains the concept of creating plugins in Tailwind CSS, highlighting the ability to extend the functionality and customize the stylesheet by creating specific design elements and utilities. ', 'Describes the use of arbitrary values in Tailwind CSS, showcasing the flexibility to directly inject custom values into CSS classes to achieve specific design requirements. ']}, {'end': 2527.911, 'start': 2292.506, 'title': 'Tailwind css: inline styling and customization', 'summary': "Explains how to use tailwind css to apply inline styles directly into html, the usage of directives like 'layer' and 'apply' to write custom css for specific scopes, and the ability to chain tailwind classes to improve code clarity and understanding.", 'duration': 235.405, 'highlights': ['Tailwind CSS allows applying inline styles directly into HTML, eliminating the need to register all customization values in tailwind.config.js. This inline approach enables building the design system directly into the HTML using Tailwind, providing flexibility and reducing the need for extensive configuration in tailwind.config.js.', "Introduction to the 'layer' directive in Tailwind CSS for writing custom CSS within a specific scope. The 'layer' directive allows writing custom CSS for a certain scope in the global.css file, providing the ability to apply styles to Tailwind base components and utilities, offering flexibility in customizing designs.", "Demonstration of using the 'apply' directive to call Tailwind classes for applying styles. The 'apply' directive allows calling the classes provided by Tailwind, enabling the application of multiple Tailwind classes and improving code clarity and understanding by chaining classes.", 'Explanation of using multiple CSS files and plugins within Tailwind CSS for efficient styling. Tailwind CSS supports using multiple CSS files and plugins, allowing developers to focus on writing plugins, which are JavaScript functions to write CSS, thereby enhancing the efficiency of styling and customization.']}], 'duration': 1819.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao708754.jpg', 'highlights': ['Tailwind CSS customization system allows for extensive customization through the tailwind.config.js file, enabling the creation of custom themes with specific colors and dynamic generation of related styles.', 'Tailwind CSS facilitates the use of dark mode by enabling the addition of multiple color schemes to the theme, allowing for easy implementation of dark mode in applications or websites.', 'Tailwind CSS provides a wide range of pre-defined colors and gradients, and allows for the creation of custom colors to be dynamically generated into related styles.', 'Tailwind CSS enables the creation of custom utilities and classes, providing the ability to stack base Tailwind classes with custom elements and designs for reusability and efficiency.', 'Tailwind CSS allows for the writing of plugins in JavaScript to modify base components and utilities, providing extensive options for customizing the framework.', 'Tailwind CSS creates classes for specific colors and properties, such as text-green-600 and bg-green-600, resulting in a streamlined CSS file that only includes the necessary classes, enhancing efficiency.', 'Tailwind CSS provides predefined classes for applying colors, text styles, backgrounds, and borders, simplifying the process of styling elements within the application.', 'Customizing Colors in tailwind.config.js Demonstrates adding custom colors to the tailwind.config.js file, enabling the use of custom colors in the application, overriding the default colors.', 'Configuring Themes, Screens, Spacing, and Font Families Explains the ability to customize themes, screens, spacing, and font families in Tailwind CSS, showcasing the flexibility of the framework.', 'Utilizing Classes to Generate CSS on the Fly Describes how Tailwind CSS generates CSS classes on the fly based on the configuration in the tailwind.config.js file, allowing customization of spacing, font families, and other design elements.', "Demonstrates the ability to set different text sizes for various screen sizes, with the example of setting text size 'SM' for all screen sizes lower than 'LG' and 'LG' for larger screens, showcasing the responsive design capabilities of Tailwind CSS.", 'Illustrates the customization of spacing by setting specific pixel values for spacing classes, showcasing the flexibility to define a custom spacing system in Tailwind CSS.', 'Explains the concept of creating plugins in Tailwind CSS, highlighting the ability to extend the functionality and customize the stylesheet by creating specific design elements and utilities.', 'Describes the use of arbitrary values in Tailwind CSS, showcasing the flexibility to directly inject custom values into CSS classes to achieve specific design requirements.', 'Tailwind CSS allows applying inline styles directly into HTML, eliminating the need to register all customization values in tailwind.config.js. This inline approach enables building the design system directly into the HTML using Tailwind, providing flexibility and reducing the need for extensive configuration in tailwind.config.js.', "Introduction to the 'layer' directive in Tailwind CSS for writing custom CSS within a specific scope. The 'layer' directive allows writing custom CSS for a certain scope in the global.css file, providing the ability to apply styles to Tailwind base components and utilities, offering flexibility in customizing designs.", "Demonstration of using the 'apply' directive to call Tailwind classes for applying styles. The 'apply' directive allows calling the classes provided by Tailwind, enabling the application of multiple Tailwind classes and improving code clarity and understanding by chaining classes.", 'Explanation of using multiple CSS files and plugins within Tailwind CSS for efficient styling. Tailwind CSS supports using multiple CSS files and plugins, allowing developers to focus on writing plugins, which are JavaScript functions to write CSS, thereby enhancing the efficiency of styling and customization.']}, {'end': 3237.581, 'segs': [{'end': 2628.13, 'src': 'embed', 'start': 2597.359, 'weight': 1, 'content': [{'end': 2603.661, 'text': 'by using text minus or dash and the size we want to have.', 'start': 2597.359, 'duration': 6.302}, {'end': 2608.403, 'text': "so let's try, let's apply those classes and let's see what's going to happen.", 'start': 2603.661, 'duration': 4.742}, {'end': 2612.504, 'text': "So I'm going to text the first class text-xs.", 'start': 2608.983, 'duration': 3.521}, {'end': 2617.626, 'text': 'that gives a font size of 0.75 rem, so 12 pixels.', 'start': 2612.504, 'duration': 5.122}, {'end': 2619.146, 'text': "I'm going to take it.", 'start': 2617.986, 'duration': 1.16}, {'end': 2626.029, 'text': "I'm going to get back there and down there we see that I've already created a class called not.", 'start': 2619.146, 'duration': 6.883}, {'end': 2628.13, 'text': 'okay?. we will see that later.', 'start': 2626.029, 'duration': 2.101}], 'summary': 'Applying text-minus class with size to achieve 0.75rem font, 12 pixels.', 'duration': 30.771, 'max_score': 2597.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2597359.jpg'}, {'end': 2687.846, 'src': 'embed', 'start': 2657.089, 'weight': 0, 'content': [{'end': 2663.293, 'text': 'So Tailwind is providing to us many different font sizes class that we can use.', 'start': 2657.089, 'duration': 6.204}, {'end': 2665.535, 'text': "And let's go gradually.", 'start': 2663.794, 'duration': 1.741}, {'end': 2675.382, 'text': "So here I'm going to get back, add my class name there, which is text small, which is supposed to be bigger than the text excess.", 'start': 2665.635, 'duration': 9.747}, {'end': 2678.004, 'text': "I'm going to update and there we go.", 'start': 2675.842, 'duration': 2.162}, {'end': 2683.245, 'text': 'and for the regular font size of tailwind we add text base there.', 'start': 2678.584, 'duration': 4.661}, {'end': 2686.125, 'text': "so i'm going to take base.", 'start': 2683.245, 'duration': 2.88}, {'end': 2687.846, 'text': 'yes, text base there.', 'start': 2686.125, 'duration': 1.721}], 'summary': 'Tailwind provides various font sizes classes like text small and text base.', 'duration': 30.757, 'max_score': 2657.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2657089.jpg'}, {'end': 3003.119, 'src': 'embed', 'start': 2955.075, 'weight': 3, 'content': [{'end': 2961.256, 'text': "So when I update, you see here that what only changed, it's the value I used.", 'start': 2955.075, 'duration': 6.181}, {'end': 2966.724, 'text': 'So here we got 18 pixels there instead of 16.', 'start': 2961.416, 'duration': 5.308}, {'end': 2969.566, 'text': "right, that's great, but what about the font family?", 'start': 2966.724, 'duration': 2.842}, {'end': 2978.891, 'text': 'if i want to use certain font family, tailwind css is offering to us the option to customize our fonts.', 'start': 2969.566, 'duration': 9.325}, {'end': 2990.737, 'text': 'okay, but also tailwind css provide to us basic font classes that if you are on different devices, you want to keep your font secure.', 'start': 2978.891, 'duration': 11.846}, {'end': 3000.378, 'text': "but what if i want to import my own font and let's go on google fonts And let's say that I want to import a special font?", 'start': 2990.737, 'duration': 9.641}, {'end': 3003.119, 'text': 'So here I got a font selected, Enter.', 'start': 3000.838, 'duration': 2.281}], 'summary': 'Tailwind css allows customizing fonts and importing own fonts, offering basic font classes and flexibility in font selection.', 'duration': 48.044, 'max_score': 2955.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2955075.jpg'}, {'end': 3179.591, 'src': 'heatmap', 'start': 3022.965, 'weight': 0.906, 'content': [{'end': 3030.413, 'text': 'get back and go to my global.css is always to import always your font there on the top.', 'start': 3022.965, 'duration': 7.448}, {'end': 3039.181, 'text': "then what i'm going to do getting back there, i'm going to copy paste the the css rule to specify the font family that i want to use.", 'start': 3030.413, 'duration': 8.768}, {'end': 3048.098, 'text': 'and remember, there we still have our layer base, which is used to act on layers that we use inside Tailwind.', 'start': 3039.181, 'duration': 8.917}, {'end': 3053.281, 'text': 'And on my HTML, what I can do is simply apply my font Inter.', 'start': 3048.218, 'duration': 5.063}, {'end': 3062.307, 'text': "And when I get back and I update and I'm going to look at it, OK, what's going to happen here? I got Inter as a font.", 'start': 3054.182, 'duration': 8.125}, {'end': 3067.09, 'text': 'So this is how you use custom font with Tailwind CSS.', 'start': 3062.747, 'duration': 4.343}, {'end': 3075.635, 'text': 'If you want to have smoothing on fonts, you can use also the class Antitialize and SubpixelAntitialize.', 'start': 3068.092, 'duration': 7.543}, {'end': 3080.317, 'text': 'It gives something, you see, maybe we have to zoom to see the difference.', 'start': 3076.255, 'duration': 4.062}, {'end': 3085.299, 'text': 'We see that our fonts are a bit thicker or thinner.', 'start': 3080.857, 'duration': 4.442}, {'end': 3087.48, 'text': 'It depends on the class you are using.', 'start': 3085.419, 'duration': 2.061}, {'end': 3089.82, 'text': "About font styling, it's exactly the same.", 'start': 3087.84, 'duration': 1.98}, {'end': 3093.422, 'text': 'You have classes for italic, not italic.', 'start': 3090.281, 'duration': 3.141}, {'end': 3098.105, 'text': 'okay?. you have also text decoration there with underline overline.', 'start': 3093.422, 'duration': 4.683}, {'end': 3107.57, 'text': "so if i go here and i get back on my first title, let's say that i want it to be italic, i can type italic and when i update there we go.", 'start': 3098.105, 'duration': 9.465}, {'end': 3109.551, 'text': "we've got the title in italic.", 'start': 3107.57, 'duration': 1.981}, {'end': 3114.714, 'text': 'if i want it underline, i can type underline and suddenly i got an underline.', 'start': 3109.551, 'duration': 5.163}, {'end': 3127.601, 'text': "I can have a line through also, which is useful when you create some kind of to do list, that when you click it's passed on the status done.", 'start': 3115.735, 'duration': 11.866}, {'end': 3131.083, 'text': 'So you can put a line through like this.', 'start': 3127.701, 'duration': 3.382}, {'end': 3134.025, 'text': 'Otherwise, you can have also an over line.', 'start': 3131.904, 'duration': 2.121}, {'end': 3138.147, 'text': 'So as you see down there, we got an example, but we can just put it in there.', 'start': 3134.205, 'duration': 3.942}, {'end': 3140.928, 'text': "We've got an over line there.", 'start': 3138.887, 'duration': 2.041}, {'end': 3146.131, 'text': "I don't know why we would use that, but it can be useful also.", 'start': 3142.709, 'duration': 3.422}, {'end': 3155.757, 'text': "And which is really cool with that text decoration, it's that with Tailwind CSS, you can act on the color, the thickness, the style of this underline.", 'start': 3146.431, 'duration': 9.326}, {'end': 3159.239, 'text': "So if we go there, we see that we've got some examples.", 'start': 3156.397, 'duration': 2.842}, {'end': 3162.921, 'text': "You can change the color of the underline, and that's really cool.", 'start': 3159.8, 'duration': 3.121}, {'end': 3165.763, 'text': "So here I'm going to change the color just to show it to you.", 'start': 3163.342, 'duration': 2.421}, {'end': 3168.485, 'text': "Let's say that we want our underline to be red.", 'start': 3166.203, 'duration': 2.282}, {'end': 3169.826, 'text': "So I'm going to get back there.", 'start': 3168.725, 'duration': 1.101}, {'end': 3175.068, 'text': 'and put underline and text decoration red 800.', 'start': 3170.726, 'duration': 4.342}, {'end': 3177.63, 'text': 'okay, i got red red 800.', 'start': 3175.068, 'duration': 2.562}, {'end': 3179.591, 'text': 'so 800 is maybe too much.', 'start': 3177.63, 'duration': 1.961}], 'summary': 'Demonstration of using custom fonts and text decorations with tailwind css, including examples of italic, underline, and overline styling.', 'duration': 156.626, 'max_score': 3022.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3022965.jpg'}, {'end': 3162.921, 'src': 'embed', 'start': 3134.205, 'weight': 5, 'content': [{'end': 3138.147, 'text': 'So as you see down there, we got an example, but we can just put it in there.', 'start': 3134.205, 'duration': 3.942}, {'end': 3140.928, 'text': "We've got an over line there.", 'start': 3138.887, 'duration': 2.041}, {'end': 3146.131, 'text': "I don't know why we would use that, but it can be useful also.", 'start': 3142.709, 'duration': 3.422}, {'end': 3155.757, 'text': "And which is really cool with that text decoration, it's that with Tailwind CSS, you can act on the color, the thickness, the style of this underline.", 'start': 3146.431, 'duration': 9.326}, {'end': 3159.239, 'text': "So if we go there, we see that we've got some examples.", 'start': 3156.397, 'duration': 2.842}, {'end': 3162.921, 'text': "You can change the color of the underline, and that's really cool.", 'start': 3159.8, 'duration': 3.121}], 'summary': 'Using tailwind css, you can customize the color, thickness, and style of underlines, providing flexibility for styling text decorations.', 'duration': 28.716, 'max_score': 3134.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3134205.jpg'}], 'start': 2533.291, 'title': 'Tailwind css typography and customizing font sizes and styles', 'summary': 'Explores how tailwind css resets default styling of html tags and demonstrates using text classes to customize font sizes, resulting in a range from 12px to 100px, and also covers customizing font sizes and styles, including importing custom fonts and modifying text decorations and styles.', 'chapters': [{'end': 2808.32, 'start': 2533.291, 'title': 'Tailwind css typography', 'summary': "Explores how tailwind css resets the default styling of html tags and demonstrates how to use tailwind's text classes to customize font sizes, resulting in a range of font sizes from 12 pixels to 100 pixels, showcasing the flexibility and control offered by tailwind css typography.", 'duration': 275.029, 'highlights': ['Tailwind CSS resets default styling of HTML tags like H1, H2, H3, and provides flexibility to customize font sizes using classes like text-xs, text-small, text-base, text-lg, text-xl, and even creating custom sizes like 9xl and 2xl, resulting in a wide range of font sizes from 12 pixels to 100 pixels. Tailwind CSS resets default styling of HTML tags like H1, H2, H3, and provides flexibility to customize font sizes using classes like text-xs, text-small, text-base, text-lg, text-xl, and even creating custom sizes like 9xl and 2xl, resulting in a wide range of font sizes from 12 pixels to 100 pixels.', 'Demonstrates the process of applying different text classes to HTML elements and showcases the immediate impact on font sizes, such as using text-xs for 12 pixels, text-small for a slightly bigger size, and progressively larger sizes like text-base, text-lg, and custom sizes like 9xl and 2xl. Demonstrates the process of applying different text classes to HTML elements and showcases the immediate impact on font sizes, such as using text-xs for 12 pixels, text-small for a slightly bigger size, and progressively larger sizes like text-base, text-lg, and custom sizes like 9xl and 2xl.', 'Illustrates the use of Tailwind CSS classes to change font sizes and the real-time effect on the text, providing a visual understanding of how the applied classes modify the font size of HTML elements. Illustrates the use of Tailwind CSS classes to change font sizes and the real-time effect on the text, providing a visual understanding of how the applied classes modify the font size of HTML elements.']}, {'end': 3237.581, 'start': 2808.32, 'title': 'Customizing font sizes and styles', 'summary': 'Explores customizing font sizes and styles with tailwind css, including changing default font sizes, importing custom fonts, using custom font classes, and modifying text decorations and styles.', 'duration': 429.261, 'highlights': ['Changing default font sizes By customizing font sizes in the tailwind.config.js file, the default font sizes can be changed, such as updating text base from 16 pixels to 18 pixels.', 'Importing custom fonts The process of importing custom fonts from sources like Google Fonts is explained, along with the steps to apply the imported font to the HTML using Tailwind CSS.', 'Modifying text decorations and styles Tailwind CSS provides classes to easily modify text decorations and styles, including options for italic, underline, overline, and customizing color, thickness, and style of the decoration.']}], 'duration': 704.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao2533291.jpg', 'highlights': ['Tailwind CSS resets default styling of HTML tags and provides flexibility to customize font sizes using classes like text-xs, text-small, text-base, text-lg, text-xl, and even creating custom sizes like 9xl and 2xl, resulting in a wide range of font sizes from 12 pixels to 100 pixels.', 'Demonstrates the process of applying different text classes to HTML elements and showcases the immediate impact on font sizes, such as using text-xs for 12 pixels, text-small for a slightly bigger size, and progressively larger sizes like text-base, text-lg, and custom sizes like 9xl and 2xl.', 'Illustrates the use of Tailwind CSS classes to change font sizes and the real-time effect on the text, providing a visual understanding of how the applied classes modify the font size of HTML elements.', 'Changing default font sizes By customizing font sizes in the tailwind.config.js file, the default font sizes can be changed, such as updating text base from 16 pixels to 18 pixels.', 'Importing custom fonts The process of importing custom fonts from sources like Google Fonts is explained, along with the steps to apply the imported font to the HTML using Tailwind CSS.', 'Modifying text decorations and styles Tailwind CSS provides classes to easily modify text decorations and styles, including options for italic, underline, overline, and customizing color, thickness, and style of the decoration.']}, {'end': 3915.591, 'segs': [{'end': 3374.092, 'src': 'embed', 'start': 3340.423, 'weight': 0, 'content': [{'end': 3345.684, 'text': 'So what I need to do is to go actually under line eight.', 'start': 3340.423, 'duration': 5.261}, {'end': 3348.905, 'text': 'And with Tailwind CSS, we can deal with line eight.', 'start': 3345.764, 'duration': 3.141}, {'end': 3359.828, 'text': 'So as you see here, we got a leading class with a number three, four, five, that make our line eight bigger.', 'start': 3349.605, 'duration': 10.223}, {'end': 3364.768, 'text': 'and at the end you get also classes, regular classes.', 'start': 3361.227, 'duration': 3.541}, {'end': 3368.53, 'text': 'that shows that you can use several sizes.', 'start': 3364.768, 'duration': 3.762}, {'end': 3372.952, 'text': 'that are what we call regular sizes of line eight.', 'start': 3368.53, 'duration': 4.422}, {'end': 3374.092, 'text': 'those regular sizes.', 'start': 3372.952, 'duration': 1.14}], 'summary': 'Using tailwind css to adjust line eight, with leading class sizes 3, 4, and 5.', 'duration': 33.669, 'max_score': 3340.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3340423.jpg'}, {'end': 3459.064, 'src': 'embed', 'start': 3429.227, 'weight': 2, 'content': [{'end': 3430.469, 'text': 'So I got a line eight there.', 'start': 3429.227, 'duration': 1.242}, {'end': 3436.276, 'text': "And if I put one, we see that my line is on the top of the next paragraph and we don't want that.", 'start': 3430.909, 'duration': 5.367}, {'end': 3439.04, 'text': "If we put two, it's better.", 'start': 3436.717, 'duration': 2.323}, {'end': 3443.226, 'text': 'But suddenly I understand that my offset is too big.', 'start': 3439.24, 'duration': 3.986}, {'end': 3444.808, 'text': 'I have to get back on my offset.', 'start': 3443.426, 'duration': 1.382}, {'end': 3445.769, 'text': "So I'm going to put four.", 'start': 3444.848, 'duration': 0.921}, {'end': 3448.352, 'text': "and maybe yeah, it's better.", 'start': 3446.79, 'duration': 1.562}, {'end': 3454.178, 'text': "so suddenly we see that we got spaced brief between that and that's better.", 'start': 3448.352, 'duration': 5.826}, {'end': 3456.141, 'text': 'and what is the leading?', 'start': 3454.178, 'duration': 1.963}, {'end': 3456.962, 'text': 'uh, leading lose.', 'start': 3456.141, 'duration': 0.821}, {'end': 3459.064, 'text': 'leading lose is the line eight, two.', 'start': 3456.962, 'duration': 2.102}], 'summary': 'Adjusting line offset from 8 to 4 improves spacing and reduces leading to line 8, 2.', 'duration': 29.837, 'max_score': 3429.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3429227.jpg'}, {'end': 3534.856, 'src': 'embed', 'start': 3506.226, 'weight': 3, 'content': [{'end': 3516.271, 'text': 'so if i get here and i put my capitalize class there and i update, we see that air of regular and p of paragraph have been capitalized.', 'start': 3506.226, 'duration': 10.045}, {'end': 3518.272, 'text': 'that could be a problem.', 'start': 3516.271, 'duration': 2.001}, {'end': 3522.099, 'text': 'so If you want to capitalize a whole text, you can do it.', 'start': 3518.272, 'duration': 3.827}, {'end': 3534.856, 'text': 'Otherwise, you would have to create some kind of middleware for the string to a function that will take the string and just capitalize the first letter with a span.', 'start': 3522.721, 'duration': 12.135}], 'summary': 'Using the capitalize class capitalizes the first letter of each word in the text.', 'duration': 28.63, 'max_score': 3506.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3506226.jpg'}, {'end': 3619.352, 'src': 'embed', 'start': 3587.161, 'weight': 4, 'content': [{'end': 3589.803, 'text': 'basically here we can use truncate.', 'start': 3587.161, 'duration': 2.642}, {'end': 3596.85, 'text': "so i don't have a very good example there, but i'm going to just put a paragraph with a long sentence.", 'start': 3589.803, 'duration': 7.047}, {'end': 3610.784, 'text': 'so this is a long sentence with a lot of words to explain that truncate will truncate my sentence.', 'start': 3596.85, 'duration': 13.934}, {'end': 3611.184, 'text': 'all right?', 'start': 3610.784, 'duration': 0.4}, {'end': 3615.188, 'text': "I could have put a lorem ipsum, but I think it's better to do.", 'start': 3611.605, 'duration': 3.583}, {'end': 3619.352, 'text': 'What we see is that my text is going to the line automatically there.', 'start': 3615.648, 'duration': 3.704}], 'summary': 'Using truncate to shorten long sentences for automatic line adjustment.', 'duration': 32.191, 'max_score': 3587.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3587161.jpg'}, {'end': 3722.07, 'src': 'embed', 'start': 3694.995, 'weight': 5, 'content': [{'end': 3699.678, 'text': 'you can use the class text ellipsis for the clip.', 'start': 3694.995, 'duration': 4.683}, {'end': 3700.918, 'text': "it's different.", 'start': 3699.678, 'duration': 1.24}, {'end': 3705.841, 'text': 'it will not wrap your word, your long word, but it will just cut it.', 'start': 3700.918, 'duration': 4.923}, {'end': 3714.866, 'text': 'just take it on overflow hidden when you add overflow hidden to test clip text overflow help us to deal with words.', 'start': 3705.841, 'duration': 9.025}, {'end': 3722.07, 'text': 'white space, help us to deal with words, spaces and if you want to wrap or not your lines, basically,', 'start': 3714.866, 'duration': 7.204}], 'summary': 'Using the class text ellipsis for the clip will cut long words and help manage word spacing and line wrapping.', 'duration': 27.075, 'max_score': 3694.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3694995.jpg'}, {'end': 3808.1, 'src': 'embed', 'start': 3779.81, 'weight': 7, 'content': [{'end': 3782.091, 'text': 'But yeah, white space, no wrap is used for that.', 'start': 3779.81, 'duration': 2.281}, {'end': 3786.373, 'text': 'Also what you get, is to use whitespace pre.', 'start': 3782.651, 'duration': 3.722}, {'end': 3789.474, 'text': "It's to preserve new line and spaces within an element.", 'start': 3786.813, 'duration': 2.661}, {'end': 3794.415, 'text': 'So sometimes you have spaces or lines that you want to keep, you use whitespace pre.', 'start': 3789.874, 'duration': 4.541}, {'end': 3803.658, 'text': 'And also, what you can do, you can use whitespace pre line, which means that you will get, every time you get a space, a line there.', 'start': 3795.336, 'duration': 8.322}, {'end': 3808.1, 'text': 'You get pre wrap, you get a lot of other options that you can use there.', 'start': 3804.359, 'duration': 3.741}], 'summary': 'Whitespace pre and pre line preserve spaces and new lines within elements.', 'duration': 28.29, 'max_score': 3779.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3779810.jpg'}, {'end': 3915.591, 'src': 'embed', 'start': 3889.493, 'weight': 6, 'content': [{'end': 3893.696, 'text': 'so to do that you use the break word class.', 'start': 3889.493, 'duration': 4.203}, {'end': 3899.84, 'text': 'okay, otherwise if you want to break all the words, you can use break all.', 'start': 3893.696, 'duration': 6.144}, {'end': 3900.66, 'text': 'that we got there.', 'start': 3899.84, 'duration': 0.82}, {'end': 3907.864, 'text': "so i'm going to get back and use break all and break all will just fit to the content.", 'start': 3900.66, 'duration': 7.204}, {'end': 3915.591, 'text': 'so there We see that the, the, the big word that we got, stayed on the first line and automatically automatically broke.', 'start': 3907.864, 'duration': 7.727}], 'summary': "Using the 'break-all' class automatically breaks long words, preserving content layout.", 'duration': 26.098, 'max_score': 3889.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3889493.jpg'}], 'start': 3237.601, 'title': 'Text manipulation in tailwind css and css techniques', 'summary': "Explores manipulating text decoration thickness, offset, and line spacing using tailwind css classes such as 8, 4, leading classes of 3, 4, 5, and 'snug' for line spacing. it also covers css text formatting and overflow techniques including various transformations, truncation methods, word breaking options, and white space usage.", 'chapters': [{'end': 3481.176, 'start': 3237.601, 'title': 'Text decoration and line spacing in tailwind css', 'summary': "Explores manipulating text decoration thickness, offset, and line spacing using tailwind css classes, including examples of values like 8, 4, leading classes of 3, 4, 5, and the usage of 'snug' for line spacing.", 'duration': 243.575, 'highlights': ['Tailwind CSS allows manipulation of text decoration thickness and offset using classes like decoration 8 and underline offset 8, impacting the appearance and spacing of underlines. The ability to use classes like decoration 8 and underline offset 8 in Tailwind CSS allows for the manipulation of text decoration thickness and offset, affecting the appearance and spacing of underlines.', 'Usage of leading classes such as 3, 4, 5 in Tailwind CSS impacts the line spacing, with options like leading normal and leading loose, enabling control over the spacing of lines within paragraphs. The utilization of leading classes like 3, 4, 5 in Tailwind CSS provides options for controlling line spacing, including leading normal and leading loose, which offer flexibility in adjusting the spacing of lines within paragraphs.', "The recommendation to use 'snug' for line spacing in real paragraphs to avoid excessive spacing, providing a balance between line spacing and readability. The suggestion to use 'snug' for line spacing in real paragraphs aims to prevent excessive spacing, promoting a balance between line spacing and readability."]}, {'end': 3915.591, 'start': 3481.516, 'title': 'Css text formatting and overflow', 'summary': 'Covers css text formatting and overflow techniques including capitalize, lowercase, and uppercase transformations, truncation with truncate and ellipsis, word breaking with break normal, words, and all, and usage of white space pre, pre-line, pre-wrap, no wrap, and wrap.', 'duration': 434.075, 'highlights': ['The chapter introduces CSS text formatting techniques such as capitalize, lowercase, and uppercase transformations. CSS text formatting techniques', 'The chapter explains the usage of truncate to shorten text without wrapping and with overflow hidden. Usage of truncate for text shortening', 'The chapter covers the application of text ellipsis to cut long words without wrapping. Application of text ellipsis for cutting long words', 'The chapter discusses word breaking techniques with break normal, words, and all. Discussion of word breaking techniques', 'The chapter emphasizes the usage of white space pre, pre-line, pre-wrap, no wrap, and wrap for preserving new lines and spaces within an element. Usage of white space pre, pre-line, pre-wrap, no wrap, and wrap']}], 'duration': 677.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3237601.jpg', 'highlights': ['Tailwind CSS allows manipulation of text decoration thickness and offset using classes like decoration 8 and underline offset 8, impacting the appearance and spacing of underlines.', 'Usage of leading classes such as 3, 4, 5 in Tailwind CSS impacts the line spacing, with options like leading normal and leading loose, enabling control over the spacing of lines within paragraphs.', "The recommendation to use 'snug' for line spacing in real paragraphs to avoid excessive spacing, providing a balance between line spacing and readability.", 'The chapter introduces CSS text formatting techniques such as capitalize, lowercase, and uppercase transformations.', 'The chapter explains the usage of truncate to shorten text without wrapping and with overflow hidden.', 'The chapter covers the application of text ellipsis to cut long words without wrapping.', 'The chapter discusses word breaking techniques with break normal, words, and all.', 'The chapter emphasizes the usage of white space pre, pre-line, pre-wrap, no wrap, and wrap for preserving new lines and spaces within an element.']}, {'end': 5350.155, 'segs': [{'end': 3984.974, 'src': 'embed', 'start': 3955.171, 'weight': 5, 'content': [{'end': 3960.755, 'text': 'And here we got some example of p minus zero, which represent a padding of zero.', 'start': 3955.171, 'duration': 5.584}, {'end': 3965.639, 'text': "But before we talk about padding, it's better to give a definition.", 'start': 3961.516, 'duration': 4.123}, {'end': 3972.124, 'text': 'Padding is the space inside an element between this element and its border.', 'start': 3966.279, 'duration': 5.845}, {'end': 3976.267, 'text': "And it's really important to understand the difference between padding and margin.", 'start': 3972.584, 'duration': 3.683}, {'end': 3984.974, 'text': 'Padding concerns space inside the element, while margin concerns space outside the element.', 'start': 3976.867, 'duration': 8.107}], 'summary': 'Padding represents space inside an element, distinct from margin.', 'duration': 29.803, 'max_score': 3955.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3955171.jpg'}, {'end': 4033.076, 'src': 'embed', 'start': 4005.109, 'weight': 0, 'content': [{'end': 4014.221, 'text': 'With Tailwind CSS, we can deal with that because it provides classes for top, right, bottom or left.', 'start': 4005.109, 'duration': 9.112}, {'end': 4016.023, 'text': "And here I'm going to zoom a bit.", 'start': 4014.682, 'duration': 1.341}, {'end': 4018.563, 'text': 'Here we got example.', 'start': 4017.242, 'duration': 1.321}, {'end': 4022.086, 'text': 'When you want to put a padding top, you use PT0.', 'start': 4019.124, 'duration': 2.962}, {'end': 4028.892, 'text': 'When you want to use padding right, you use PR0, PB for bottom, PL, etc, etc.', 'start': 4022.467, 'duration': 6.425}, {'end': 4033.076, 'text': 'So I got my app that is running there and I just got a hello there.', 'start': 4029.533, 'duration': 3.543}], 'summary': 'Tailwind css provides classes for directional padding (e.g., pt0, pr0, pb, pl) for easy styling.', 'duration': 27.967, 'max_score': 4005.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao4005109.jpg'}, {'end': 4674.071, 'src': 'embed', 'start': 4639.596, 'weight': 1, 'content': [{'end': 4643.421, 'text': 'When we talk about sizing, of course, we talk about width and height.', 'start': 4639.596, 'duration': 3.825}, {'end': 4651.25, 'text': 'And exactly like we saw on padding and margin, you can give sizes, height, width, two elements.', 'start': 4644.122, 'duration': 7.128}, {'end': 4655.898, 'text': 'When I go on width on the official documentation,', 'start': 4651.951, 'duration': 3.947}, {'end': 4664.984, 'text': 'I see that Tailwind is providing to us several classes that works on exactly the same model as the margin and padding.', 'start': 4655.898, 'duration': 9.086}, {'end': 4670.308, 'text': 'And what I created already is with 16.8.', 'start': 4666.045, 'duration': 4.263}, {'end': 4674.071, 'text': '16, BG Red 500 box.', 'start': 4670.308, 'duration': 3.763}], 'summary': 'Tailwind offers classes for sizing elements like width and height, following a similar model as margin and padding.', 'duration': 34.475, 'max_score': 4639.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao4639596.jpg'}, {'end': 4998.764, 'src': 'heatmap', 'start': 4693.308, 'weight': 0.73, 'content': [{'end': 4698.073, 'text': 'And those values are basics values provided by Tailwind.', 'start': 4693.308, 'duration': 4.765}, {'end': 4709.625, 'text': 'Here, down there, we see that we can have also several values that goes up differently from the number that you are going to path.', 'start': 4699.292, 'duration': 10.333}, {'end': 4711.788, 'text': 'Those are called fixed width.', 'start': 4710.065, 'duration': 1.723}, {'end': 4716.808, 'text': 'But what you have also is percentage width.', 'start': 4713.086, 'duration': 3.722}, {'end': 4721.61, 'text': 'And basically, those percentage width, they work with flex.', 'start': 4717.488, 'duration': 4.122}, {'end': 4725.752, 'text': 'If you want to know more, please refer to my video using flex with Tailwind.', 'start': 4722.21, 'duration': 3.542}, {'end': 4727.033, 'text': 'So what I can do?', 'start': 4726.212, 'duration': 0.821}, {'end': 4736.497, 'text': "I got those two boxes there, and if I type class name and here I'm going to put flex, those two box will come next to each other, okay?", 'start': 4727.033, 'duration': 9.464}, {'end': 4744.964, 'text': "And let's say that I want to give them a width And I want to give them a width that will take half of the screen.", 'start': 4737.278, 'duration': 7.686}, {'end': 4754.093, 'text': 'And instead of having 16 there, what I can say to them, please take half of it, 1 slash 2.', 'start': 4745.744, 'duration': 8.349}, {'end': 4755.974, 'text': 'And when I update, there we go.', 'start': 4754.093, 'duration': 1.881}, {'end': 4765.099, 'text': 'We see that my two divs, OK? are taking 50% each of the space of the current div on flex.', 'start': 4756.034, 'duration': 9.065}, {'end': 4769.32, 'text': 'But actually, I could have different behavior.', 'start': 4765.639, 'duration': 3.681}, {'end': 4771.58, 'text': "Let's take, for example, this one.", 'start': 4769.82, 'duration': 1.76}, {'end': 4777.802, 'text': "Let's say that on five columns, I would have here two on five.", 'start': 4771.96, 'duration': 5.842}, {'end': 4779.423, 'text': 'and down there.', 'start': 4778.622, 'duration': 0.801}, {'end': 4786.608, 'text': 'of course the latest would have what three columns, because the difference between two and five here is free.', 'start': 4779.423, 'duration': 7.185}, {'end': 4791.451, 'text': 'so i would have here a lower column than this one.', 'start': 4786.608, 'duration': 4.843}, {'end': 4796.155, 'text': "so let's say that here is going to be a sidebar and here is to meet main content,", 'start': 4791.451, 'duration': 4.704}, {'end': 4801.859, 'text': 'which happens most of the time back into my application when i update.', 'start': 4796.155, 'duration': 5.704}, {'end': 4802.62, 'text': 'there we go.', 'start': 4801.859, 'duration': 0.761}, {'end': 4808.29, 'text': "i got a sidebar which is very big because it's two of five columns.", 'start': 4802.62, 'duration': 5.67}, {'end': 4814.995, 'text': "Actually, what I would need to have is instead, let's say, one of five columns.", 'start': 4808.791, 'duration': 6.204}, {'end': 4818.737, 'text': "But what's gonna happen here is that we are missing a column there.", 'start': 4815.375, 'duration': 3.362}, {'end': 4826.583, 'text': "So don't make the mistake, okay, here, to miss one space because Tailwind will wait for another one.", 'start': 4819.578, 'duration': 7.005}, {'end': 4829.725, 'text': 'Here, we are supposed to have four on five.', 'start': 4826.923, 'duration': 2.802}, {'end': 4833.766, 'text': "And now let's see when we move our content.", 'start': 4830.585, 'duration': 3.181}, {'end': 4840.448, 'text': 'As you see on the responsive side, we have columns that are adapting themselves.', 'start': 4834.486, 'duration': 5.962}, {'end': 4847.05, 'text': 'So sometimes that can be a problem because in the sidebar you will have content and this content will maybe overflow.', 'start': 4841.148, 'duration': 5.902}, {'end': 4849.23, 'text': "Let's talk now about the 8.", 'start': 4847.07, 'duration': 2.16}, {'end': 4850.771, 'text': "It's exactly the same.", 'start': 4849.23, 'duration': 1.541}, {'end': 4857.793, 'text': "So Tailwind is providing to us basic 8 that we can use and most of the time it's really useful.", 'start': 4851.471, 'duration': 6.322}, {'end': 4870.736, 'text': 'So here we already used a height of 16, okay? But look, we can have other height that we can use that are proportionally bigger or not.', 'start': 4858.493, 'duration': 12.243}, {'end': 4876.077, 'text': 'Of course we have width and height, but we also have mean width.', 'start': 4871.416, 'duration': 4.661}, {'end': 4878.037, 'text': 'So you can play with mean width.', 'start': 4876.597, 'duration': 1.44}, {'end': 4882.958, 'text': 'You get several classes that can be applied to the content.', 'start': 4878.337, 'duration': 4.621}, {'end': 4888.32, 'text': 'So sometimes you would like to have a mean width of the content.', 'start': 4883.358, 'duration': 4.962}, {'end': 4892.082, 'text': "So here, let's say that we would have a mean with mean content.", 'start': 4888.34, 'duration': 3.742}, {'end': 4899.025, 'text': 'So what I would do there, instead of having this, I would have mean with, there we go.', 'start': 4892.702, 'duration': 6.323}, {'end': 4906.669, 'text': 'And we see that the sidebar took the size actually of its co-locating div.', 'start': 4899.606, 'duration': 7.063}, {'end': 4912.813, 'text': 'So here, if I lower the size of the eight actually sorry of my main content,', 'start': 4907.21, 'duration': 5.603}, {'end': 4920.396, 'text': 'what is going to happen is that my sidebar is going to stick to the height of my content.', 'start': 4913.633, 'duration': 6.763}, {'end': 4929.88, 'text': 'so you use for that mean with mean, which says that he wants to irritate from the mean content of its parent element.', 'start': 4920.396, 'duration': 9.484}, {'end': 4931.781, 'text': "it's exactly the same for max width.", 'start': 4929.88, 'duration': 1.901}, {'end': 4936.503, 'text': 'the main difference is that on max width you have several other classes.', 'start': 4931.781, 'duration': 4.722}, {'end': 4943.65, 'text': 'okay, that just says that we want to have, for instance, max width full.', 'start': 4936.503, 'duration': 7.147}, {'end': 4953.201, 'text': 'so the big content there will take only, okay, the maximum width of the current browser.', 'start': 4943.65, 'duration': 9.551}, {'end': 4959.547, 'text': "so let's take an example and let's say that here, our main content,", 'start': 4954.102, 'duration': 5.445}, {'end': 4965.773, 'text': "we want to put a margin there and maybe this margin we're going to give it a big margin.", 'start': 4959.547, 'duration': 6.226}, {'end': 4966.654, 'text': 'okay, 72.', 'start': 4965.773, 'duration': 0.881}, {'end': 4977.564, 'text': "so i'm going to save and when i update we see that i got a big margin and if i remove my width full and i just put my flex there and i save, okay.", 'start': 4966.654, 'duration': 10.91}, {'end': 4980.127, 'text': "let's take an example.", 'start': 4978.445, 'duration': 1.682}, {'end': 4988.495, 'text': "we have our sidebar and our main content there and let's say that we want to put a max width and this one is going to be here.", 'start': 4980.127, 'duration': 8.368}, {'end': 4998.764, 'text': "we've got some example xl, lg, md, whatever i'm going to put xl and here suddenly what we're going to see is that my content okay,", 'start': 4988.495, 'duration': 10.269}], 'summary': 'Tailwind provides basic and flexible values for width, height, max width, and mean width, allowing for responsive design and flexible layouts.', 'duration': 305.456, 'max_score': 4693.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao4693308.jpg'}, {'end': 5144.961, 'src': 'embed', 'start': 5113.61, 'weight': 4, 'content': [{'end': 5122.906, 'text': 'What you would do if you would like to have space between sidebar and main content is basically putting margin or the padding.', 'start': 5113.61, 'duration': 9.296}, {'end': 5124.588, 'text': 'It depends on how you would do it.', 'start': 5122.966, 'duration': 1.622}, {'end': 5126.572, 'text': 'Actually, you are not obliged.', 'start': 5125.35, 'duration': 1.222}, {'end': 5134.957, 'text': 'Tailwind CSS is providing to us space between classes that help us to create space between elements.', 'start': 5127.694, 'duration': 7.263}, {'end': 5138.878, 'text': "And it's doing it in a smart way.", 'start': 5135.817, 'duration': 3.061}, {'end': 5141.239, 'text': 'When we go down, we got an example here.', 'start': 5139.419, 'duration': 1.82}, {'end': 5144.961, 'text': 'We can use space minus X.', 'start': 5141.62, 'duration': 3.341}], 'summary': 'Use margin or padding to create space between sidebar and main content in tailwind css, with classes like space-x.', 'duration': 31.351, 'max_score': 5113.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao5113610.jpg'}], 'start': 3915.931, 'title': 'Tailwind css spacing and sizing', 'summary': 'Delves into tailwind css for spacing and sizing, covering column layouts, height and width adjustments, space between elements, and customization of margin classes, with practical examples and quantifiable data.', 'chapters': [{'end': 4059.69, 'start': 3915.931, 'title': 'Introduction to padding in tailwind css', 'summary': 'Introduces the concept of padding in tailwind css, emphasizing its importance and how tailwind css provides classes for creating padding, such as p-0 for zero padding, and specific classes like pt0 for padding top and pr0 for padding right.', 'duration': 143.759, 'highlights': ['The chapter introduces the concept of padding in Tailwind CSS, emphasizing its importance and how Tailwind CSS provides classes for creating padding, such as p-0 for zero padding, and specific classes like PT0 for padding top and PR0 for padding right.', 'Padding is defined as the space inside an element between the element and its border, and it is essential to understand the difference between padding and margin, with padding dealing with space inside the element and margin dealing with space outside the element.', 'Tailwind CSS offers classes for creating padding in various directions, such as PT0 for padding top, PR0 for padding right, PB0 for padding bottom, and PL0 for padding left, allowing for precise control over padding placement.']}, {'end': 4297.227, 'start': 4059.69, 'title': 'Css padding and margin explanation', 'summary': 'Explains the usage of css padding and margin, demonstrating how different values correspond to pixel measurements, and how to apply padding and margin to specific sides, as well as introducing the concept of axis-specific padding.', 'duration': 237.537, 'highlights': ["The padding class 'p1' corresponds to 4 pixels, as demonstrated by adding 'p1' to the red box and observing the increase in space to 4 pixels. The 'p1' class corresponds to 4 pixels, as shown by the increase in space when applied to the red box.", "Demonstrating the easy application of padding to specific sides by using 'l' for left and 'r' for right, resulting in the padding being applied solely to the desired side. Applying padding to specific sides using 'l' for left and 'r' for right showcases the easy application of padding to the desired side.", "Introduction of axis-specific padding, utilizing 'y' for vertical padding and 'x' for horizontal padding, exemplified by the application of padding to only the top and bottom, and then to the left and right sides. The concept of axis-specific padding is introduced, with the usage of 'y' for vertical padding and 'x' for horizontal padding, showcasing the ability to apply padding to specific dimensions."]}, {'end': 4769.32, 'start': 4297.708, 'title': 'Understanding margins, paddings, and spacing in tailwind', 'summary': "Explains the concepts of margin, padding, and spacing in tailwind, demonstrating their usage and impact on elements' design and layout, showcasing examples and quantifiable data.", 'duration': 471.612, 'highlights': ['Tailwind provides classes for setting margin and padding, allowing for easy adjustment of space around elements, demonstrated with examples and quantifiable data. Tailwind classes for margin and padding | Examples of adjusting space around elements | Demonstration of quantifiable data', 'Understanding the impact of margin and padding on the layout, with emphasis on the difference between margin and padding, and their visual representation, supported by practical examples. Impact of margin and padding on layout | Difference between margin and padding | Practical examples of visual representation', 'Demonstrating the usage of negative values for margin and padding, highlighting their impact on element positioning with practical examples and the rationale behind their application. Usage of negative values for margin and padding | Impact on element positioning | Practical examples and rationale', 'Explaining the usage of Tailwind classes for setting width and height, showcasing examples and the correlation between these classes and margin/padding, with quantifiable data to support the demonstration. Tailwind classes for setting width and height | Correlation with margin and padding classes | Examples and quantifiable data', 'Illustrating the usage of percentage width with flex, demonstrating how these properties work together and showcasing practical examples with quantifiable data to support the demonstration. Usage of percentage width with flex | Demonstration of properties working together | Practical examples and quantifiable data']}, {'end': 5350.155, 'start': 4769.82, 'title': 'Tailwind css spacing and sizing', 'summary': 'Explores the usage of tailwind css for spacing and sizing, including examples of column layouts, height and width adjustments, space between elements, and customization of margin classes.', 'duration': 580.335, 'highlights': ['Tailwind CSS provides classes for column layout adjustments, such as specifying the number of columns and their sizes. The speaker discusses adjusting column layouts in Tailwind CSS, providing an example of specifying the number of columns and their sizes.', 'The usage of height and width classes in Tailwind CSS is illustrated, including adjustments for responsive layouts and handling overflowing content. The transcript explains the usage of height and width classes in Tailwind CSS, demonstrating adjustments for responsive layouts and addressing overflowing content.', 'The chapter explains the implementation of height and width classes, including mean width, max width, and their impact on element sizing and responsiveness. The chapter delves into the implementation of height and width classes, including mean width, max width, and their impact on element sizing and responsiveness.', "Tailwind CSS features classes for adjusting spacing and sizing between elements, demonstrated through examples of margin and padding adjustments. The transcript highlights Tailwind CSS's classes for adjusting spacing and sizing between elements, showing examples of margin and padding adjustments.", 'The process of customizing margin classes in Tailwind CSS is explained, showcasing the adjustments made in the tailwind.config.js file to modify margin sizes. The chapter details the process of customizing margin classes in Tailwind CSS, demonstrating the adjustments made in the tailwind.config.js file to modify margin sizes.']}], 'duration': 1434.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao3915931.jpg', 'highlights': ['Tailwind CSS provides classes for adjusting spacing and sizing between elements, demonstrated through examples of margin and padding adjustments.', 'The chapter delves into the implementation of height and width classes, including mean width, max width, and their impact on element sizing and responsiveness.', 'The chapter explains the implementation of height and width classes, including mean width, max width, and their impact on element sizing and responsiveness.', 'Tailwind CSS features classes for adjusting spacing and sizing between elements, demonstrated through examples of margin and padding adjustments.', 'The process of customizing margin classes in Tailwind CSS is explained, showcasing the adjustments made in the tailwind.config.js file to modify margin sizes.', 'Understanding the impact of margin and padding on the layout, with emphasis on the difference between margin and padding, and their visual representation, supported by practical examples.']}, {'end': 7319.333, 'segs': [{'end': 5608.514, 'src': 'embed', 'start': 5579.175, 'weight': 0, 'content': [{'end': 5589.961, 'text': 'okay?. I can wrap my main content and my sidebar in a flex there in the flex element, and I got exactly what I want.', 'start': 5579.175, 'duration': 10.786}, {'end': 5599.188, 'text': 'Suddenly, I got my main content and my sidebar on a row, and I got my header on another row.', 'start': 5590.722, 'duration': 8.466}, {'end': 5603.43, 'text': 'This is how you can organize your application with flex property.', 'start': 5599.268, 'duration': 4.162}, {'end': 5608.514, 'text': "There's a lot of other elements we will see that we can use.", 'start': 5604.991, 'duration': 3.523}], 'summary': 'Using flex property to organize content in rows for application layout.', 'duration': 29.339, 'max_score': 5579.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao5579175.jpg'}, {'end': 5907.915, 'src': 'heatmap', 'start': 5743.017, 'weight': 0.715, 'content': [{'end': 5754.087, 'text': "So I'm going to add here, next to this, flex row reverse, and let's look what is going to happen when i get back.", 'start': 5743.017, 'duration': 11.07}, {'end': 5760.033, 'text': 'what i have is my two elements that have been reversed.', 'start': 5754.087, 'duration': 5.946}, {'end': 5769.641, 'text': "main content is supposed to be the first div and finally it's sidebar and menu that appear as first.", 'start': 5761.414, 'duration': 8.227}, {'end': 5773.264, 'text': "it's because i've used flex row reverse.", 'start': 5769.641, 'duration': 3.623}, {'end': 5783.392, 'text': "okay, and now let's see if we remove the flex row that we put before and the flex that is here and i save and i get back.", 'start': 5773.264, 'duration': 10.128}, {'end': 5785.834, 'text': 'what happened is that nothing happens anymore.', 'start': 5783.392, 'duration': 2.442}, {'end': 5787.578, 'text': 'Nothing happens anymore.', 'start': 5786.658, 'duration': 0.92}, {'end': 5794.361, 'text': 'I got my flex row reverse, but on my CSS down there, we can see that I got here a problem.', 'start': 5788.299, 'duration': 6.062}, {'end': 5805.326, 'text': "And this problem says that we have to put another property to say, what display do you want to use? So let's just try there.", 'start': 5794.521, 'duration': 10.805}, {'end': 5807.247, 'text': 'It talks about display block.', 'start': 5805.446, 'duration': 1.801}, {'end': 5811.629, 'text': 'And if I put display block, nothing happens.', 'start': 5807.667, 'duration': 3.962}, {'end': 5819.142, 'text': 'Nothing happens because flex direction actually needs to get flex as a property.', 'start': 5813.297, 'duration': 5.845}, {'end': 5826.588, 'text': 'So what you gotta do is always to specify flex before you use a flex class after.', 'start': 5819.863, 'duration': 6.725}, {'end': 5831.493, 'text': "Let's remove this reverse properties that we've got for now.", 'start': 5827.089, 'duration': 4.404}, {'end': 5835.115, 'text': "And let's get back on our main element.", 'start': 5832.193, 'duration': 2.922}, {'end': 5838.137, 'text': 'So here I get to remove also my flex and there we go.', 'start': 5835.155, 'duration': 2.982}, {'end': 5844.881, 'text': 'This is supposed to be my application with a main content and a sidebar menu.', 'start': 5838.757, 'duration': 6.124}, {'end': 5850.811, 'text': 'But what I want to have is basically want to have space.', 'start': 5846.022, 'duration': 4.789}, {'end': 5858.876, 'text': 'i want to have a big main content and to do that what i can do is to use flex grow, flex grow.', 'start': 5850.811, 'duration': 8.065}, {'end': 5868.742, 'text': 'help us to make a a div where we had the property flex at a certain size, and if we look at the example down there,', 'start': 5858.876, 'duration': 9.866}, {'end': 5873.038, 'text': "we've got grow that we can use on the column we want to grow And we've got.", 'start': 5868.742, 'duration': 4.296}, {'end': 5876.239, 'text': 'also, we see flex none on other columns.', 'start': 5873.038, 'duration': 3.201}, {'end': 5887.143, 'text': 'So I need to add grow not to my parent but to my main content because this is my main content that I want to be grow.', 'start': 5876.939, 'duration': 10.204}, {'end': 5890.824, 'text': "So I'm going to get back and there we go.", 'start': 5887.823, 'duration': 3.001}, {'end': 5902.792, 'text': 'We see that my main content take all the space and next my content, where i added flex known, take the size he had to take.', 'start': 5891.484, 'duration': 11.308}, {'end': 5907.915, 'text': "let's talk now about flex basis so we can deal with colon size this way.", 'start': 5902.792, 'duration': 5.123}], 'summary': 'Using flex properties like flex row reverse, flex grow, and flex basis to manipulate layout and space in a web application.', 'duration': 164.898, 'max_score': 5743.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao5743017.jpg'}, {'end': 6207.691, 'src': 'heatmap', 'start': 6055.08, 'weight': 0.918, 'content': [{'end': 6055.66, 'text': 'and there we go.', 'start': 6055.08, 'duration': 0.58}, {'end': 6066.715, 'text': "i got my sidebar and my main content, and what i want to do actually is that when I'm going to just go down like this,", 'start': 6055.66, 'duration': 11.055}, {'end': 6070.498, 'text': 'I want my main content to come under my sidebar.', 'start': 6066.715, 'duration': 3.783}, {'end': 6071.378, 'text': 'there, all right?', 'start': 6070.498, 'duration': 0.88}, {'end': 6074.481, 'text': "So to be more clear, I'm going to add some color.", 'start': 6072.019, 'duration': 2.462}, {'end': 6082.426, 'text': "I'm going to add a BG Red 600 to my main content, okay? So when I update, there we go, I get the red part.", 'start': 6074.981, 'duration': 7.445}, {'end': 6087.87, 'text': "And then I'm going to add a BG Sky of 500 to my sidebar.", 'start': 6083.026, 'duration': 4.844}, {'end': 6089.611, 'text': 'All right, there we go.', 'start': 6088.95, 'duration': 0.661}, {'end': 6091.392, 'text': "So we've got these two elements there.", 'start': 6089.631, 'duration': 1.761}, {'end': 6099.997, 'text': 'And what I wanna do, I want to change the flex properties when I arrive on a certain size.', 'start': 6091.972, 'duration': 8.025}, {'end': 6108.663, 'text': "So how could I do this? How could I do this? Let's get back to the documentation and let's get back to the flex direction.", 'start': 6100.698, 'duration': 7.965}, {'end': 6124.418, 'text': "So when I get back on there here we see that what I can do is to add, for instance, let's add this flex flex colon and on md, flex row.", 'start': 6109.423, 'duration': 14.995}, {'end': 6127.783, 'text': 'i go there and on my parent i had flex flex call.', 'start': 6124.418, 'duration': 3.365}, {'end': 6134.01, 'text': "what's happening is that i'm on a row, but if i go down suddenly i have a mobile behavior.", 'start': 6127.783, 'duration': 6.227}, {'end': 6143.102, 'text': "Okay, I got a mobile behavior and my sidebar doesn't take the whole space, so I can do actually exactly the same.", 'start': 6134.611, 'duration': 8.491}, {'end': 6146.846, 'text': 'I can put my medium on the size of the sidebar.', 'start': 6143.402, 'duration': 3.444}, {'end': 6153.054, 'text': "So basically here what we've got is that my space is automatically fulfilled.", 'start': 6147.687, 'duration': 5.367}, {'end': 6160.637, 'text': 'So this is how we can work actually with flex direction depending on the screen size that you have.', 'start': 6153.834, 'duration': 6.803}, {'end': 6169.82, 'text': 'So on a mobile, you would have a different behavior and Tailwind is very useful for that, okay? Tailwind is very easy to deal with.', 'start': 6160.977, 'duration': 8.843}, {'end': 6173.422, 'text': 'For instance, you have got also the flex wrap option.', 'start': 6170.241, 'duration': 3.181}, {'end': 6178.888, 'text': 'properties that helps you to basically wrap or not your content.', 'start': 6173.962, 'duration': 4.926}, {'end': 6180.53, 'text': "let's take this example there.", 'start': 6178.888, 'duration': 1.642}, {'end': 6182.972, 'text': "so i'm going to copy paste this and get back.", 'start': 6180.53, 'duration': 2.442}, {'end': 6186.076, 'text': "i'm going to go directly on this row.", 'start': 6182.972, 'duration': 3.104}, {'end': 6188.218, 'text': "so basically, i'm going to remove what i did.", 'start': 6186.076, 'duration': 2.142}, {'end': 6190.76, 'text': "Okay, I'm going to put this", 'start': 6189.159, 'duration': 1.601}, {'end': 6191.241, 'text': 'There we go.', 'start': 6190.86, 'duration': 0.381}, {'end': 6192.862, 'text': "And I'm going to put class name.", 'start': 6191.381, 'duration': 1.481}, {'end': 6195.323, 'text': 'So I got my elements there.', 'start': 6193.562, 'duration': 1.761}, {'end': 6198.045, 'text': 'Okay, 123.', 'start': 6195.623, 'duration': 2.422}, {'end': 6201.147, 'text': "And let's say that I want them all of them to be.", 'start': 6198.045, 'duration': 3.102}, {'end': 6205.31, 'text': "So basically, we work with what we've learned with full.", 'start': 6201.947, 'duration': 3.363}, {'end': 6207.691, 'text': 'or grow.', 'start': 6206.17, 'duration': 1.521}], 'summary': 'Using tailwind, the speaker demonstrates responsive design with flex properties and color changes for main content and sidebar.', 'duration': 152.611, 'max_score': 6055.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6055080.jpg'}, {'end': 6180.53, 'src': 'embed', 'start': 6153.834, 'weight': 2, 'content': [{'end': 6160.637, 'text': 'So this is how we can work actually with flex direction depending on the screen size that you have.', 'start': 6153.834, 'duration': 6.803}, {'end': 6169.82, 'text': 'So on a mobile, you would have a different behavior and Tailwind is very useful for that, okay? Tailwind is very easy to deal with.', 'start': 6160.977, 'duration': 8.843}, {'end': 6173.422, 'text': 'For instance, you have got also the flex wrap option.', 'start': 6170.241, 'duration': 3.181}, {'end': 6178.888, 'text': 'properties that helps you to basically wrap or not your content.', 'start': 6173.962, 'duration': 4.926}, {'end': 6180.53, 'text': "let's take this example there.", 'start': 6178.888, 'duration': 1.642}], 'summary': "Tailwind's flexbox properties adapt to different screen sizes, making it easy to create responsive designs.", 'duration': 26.696, 'max_score': 6153.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6153834.jpg'}, {'end': 6235.004, 'src': 'embed', 'start': 6207.691, 'weight': 10, 'content': [{'end': 6215.094, 'text': "and what's going to happen is that it's not taking all the size, because i have to specify a with full, and there we go.", 'start': 6207.691, 'duration': 7.403}, {'end': 6217.095, 'text': 'so i got my elements there.', 'start': 6215.094, 'duration': 2.001}, {'end': 6222.498, 'text': "so i got my three columns there and we see that they don't wrap wrap.", 'start': 6217.095, 'duration': 5.403}, {'end': 6234.324, 'text': 'it means that you want the element to go automatically on a new row at the line, actually, and if i had several other elements, okay, so four or five.', 'start': 6222.498, 'duration': 11.826}, {'end': 6235.004, 'text': 'there we go.', 'start': 6234.324, 'duration': 0.68}], 'summary': 'Demonstrated column elements not wrapping, allowing for automatic new row placement.', 'duration': 27.313, 'max_score': 6207.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6207691.jpg'}, {'end': 6326.556, 'src': 'embed', 'start': 6296.684, 'weight': 4, 'content': [{'end': 6307.789, 'text': 'sometimes you have elements like this and you want to justify them in a specific place, and very often you want to justify them in the center.', 'start': 6296.684, 'duration': 11.105}, {'end': 6311.951, 'text': 'as we see there, what we can do is to use justify center.', 'start': 6307.789, 'duration': 4.162}, {'end': 6313.392, 'text': 'so there i came back.', 'start': 6311.951, 'duration': 1.441}, {'end': 6317.274, 'text': 'i have my sidebar and my main content with no property.', 'start': 6313.392, 'duration': 3.882}, {'end': 6326.556, 'text': "okay, so let's say that up there on the flex parent, i want to specify that they justify on the center.", 'start': 6317.694, 'duration': 8.862}], 'summary': 'Using justify center to align elements in the center on flex parent.', 'duration': 29.872, 'max_score': 6296.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6296684.jpg'}, {'end': 6496.881, 'src': 'embed', 'start': 6471.628, 'weight': 6, 'content': [{'end': 6476.51, 'text': 'There is an equal space created between all these elements.', 'start': 6471.628, 'duration': 4.882}, {'end': 6479.592, 'text': 'For flexbox, we use also align items.', 'start': 6476.71, 'duration': 2.882}, {'end': 6485.615, 'text': 'We saw that on a row, we want to deal with the space between elements and how to order them.', 'start': 6480.152, 'duration': 5.463}, {'end': 6491.939, 'text': 'But actually, now on the vertical, how we do? Actually, on the vertical, we use align items.', 'start': 6486.176, 'duration': 5.763}, {'end': 6493.86, 'text': 'So here I got align items.', 'start': 6492.359, 'duration': 1.501}, {'end': 6496.881, 'text': 'and here i got a justify.', 'start': 6494.76, 'duration': 2.121}], 'summary': 'Equal space created between elements using flexbox align items and justify.', 'duration': 25.253, 'max_score': 6471.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6471628.jpg'}, {'end': 6623.13, 'src': 'embed', 'start': 6598.778, 'weight': 7, 'content': [{'end': 6608.265, 'text': "of course you understand now that to align on the end we can put items end and when i update so now on the bottom we've got everything aligned with item end.", 'start': 6598.778, 'duration': 9.487}, {'end': 6611.886, 'text': 'Another example, maybe a bit more tricky.', 'start': 6609.005, 'duration': 2.881}, {'end': 6613.607, 'text': 'We can copy paste this.', 'start': 6612.426, 'duration': 1.181}, {'end': 6614.787, 'text': "It's the baseline.", 'start': 6613.967, 'duration': 0.82}, {'end': 6620.349, 'text': "So the baseline, it's based on the line that starts inside your div.", 'start': 6615.227, 'duration': 5.122}, {'end': 6622.07, 'text': "So I'm going to copy paste this.", 'start': 6620.81, 'duration': 1.26}, {'end': 6623.13, 'text': 'I need to get back.', 'start': 6622.09, 'duration': 1.04}], 'summary': 'Align items at end; use baseline for line starting in div.', 'duration': 24.352, 'max_score': 6598.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6598778.jpg'}, {'end': 6737.307, 'src': 'embed', 'start': 6709.605, 'weight': 8, 'content': [{'end': 6718.713, 'text': 'Tailwind CSS is providing to us grids and with grids we can create columns exactly like flex but in another way.', 'start': 6709.605, 'duration': 9.108}, {'end': 6727.561, 'text': 'Actually, when designers are developing their templates most of the time, they are using grids to separate elements from each other.', 'start': 6719.454, 'duration': 8.107}, {'end': 6733.305, 'text': 'On Flexbox, we have the possibility to put elements next to each other.', 'start': 6728.622, 'duration': 4.683}, {'end': 6737.307, 'text': 'However, grids help us to create dynamically the columns we need.', 'start': 6733.805, 'duration': 3.502}], 'summary': 'Tailwind css offers grids to create columns for designers, providing a dynamic way to separate elements.', 'duration': 27.702, 'max_score': 6709.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao6709605.jpg'}, {'end': 7093.136, 'src': 'embed', 'start': 7062.208, 'weight': 9, 'content': [{'end': 7067.493, 'text': "okay for the calls, so it's going on the top of each other.", 'start': 7062.208, 'duration': 5.285}, {'end': 7069.996, 'text': "okay, so that's really cool.", 'start': 7067.493, 'duration': 2.503}, {'end': 7073.681, 'text': "um, grid with columns, i'm using them all the time.", 'start': 7069.996, 'duration': 3.685}, {'end': 7077.786, 'text': "um, it's very, very useful to create templates with that.", 'start': 7073.681, 'duration': 4.105}, {'end': 7085.428, 'text': 'However, sometimes we need to deal with actually the size of our columns.', 'start': 7078.942, 'duration': 6.486}, {'end': 7093.136, 'text': 'And of course, Tailwind thought about this problem with grids by using the col span class.', 'start': 7085.488, 'duration': 7.648}], 'summary': 'Tailwind grid system allows for flexible column sizing and template creation.', 'duration': 30.928, 'max_score': 7062.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7062208.jpg'}, {'end': 7290.773, 'src': 'embed', 'start': 7261.081, 'weight': 11, 'content': [{'end': 7263.241, 'text': "That's what you can do with the grid calls.", 'start': 7261.081, 'duration': 2.16}, {'end': 7268.043, 'text': 'And if we update that, we will have empty spaces.', 'start': 7263.281, 'duration': 4.762}, {'end': 7271.845, 'text': 'Sometimes in your design, this is what you want to happen.', 'start': 7268.664, 'duration': 3.181}, {'end': 7274.786, 'text': 'This is how it can work.', 'start': 7271.865, 'duration': 2.921}, {'end': 7285.41, 'text': 'And of course, if we go down, what we can see is that we can move some elements to say you have to start there or you have to start there.', 'start': 7275.406, 'duration': 10.004}, {'end': 7290.773, 'text': "It's working with call start and call end.", 'start': 7286.27, 'duration': 4.503}], 'summary': 'Using grid calls allows for flexible design with empty spaces and element movement.', 'duration': 29.692, 'max_score': 7261.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7261081.jpg'}], 'start': 5350.155, 'title': 'Organizing layouts and grids with flexbox and tailwind css', 'summary': 'Covers organizing layouts with tailwind css flex properties and using css flexbox properties, discussing their impact on the layout of elements, along with flexbox alignment and justification properties, and demonstrates the usage of tailwind css grids to create dynamic columns and control column sizes.', 'chapters': [{'end': 6180.53, 'start': 5350.155, 'title': 'Organizing layouts with tailwind css flex', 'summary': 'Discusses using tailwind css flex properties to organize elements in a row or column, with examples of applying flex, flex call, flex row, flex row reverse, flex grow, flex basis, and flex wrap, to control the layout based on screen size.', 'duration': 830.375, 'highlights': ['Using Tailwind CSS flex properties to organize elements in a row or column Demonstrates using flex property to align elements in a row and explains how to use flex to organize elements in a row or column.', 'Applying flex, flex call, flex row, flex row reverse to control layout Illustrates the use of flex, flex call, flex row, and flex row reverse to control the layout of elements, with practical examples.', 'Utilizing flex grow and flex basis to manage element sizes Explains the use of flex grow to allocate space to a specific element and flex basis to set the original size of each div in a row, with practical demonstrations.', 'Adapting layout based on screen size using flex direction Shows how to adjust the layout based on screen size using flex direction, with specific examples of adapting the layout for mobile screens.']}, {'end': 6346.5, 'start': 6180.53, 'title': 'Css flexbox properties', 'summary': 'Discusses the usage of flexbox properties including flex, flex-wrap, justify-content, and media queries, demonstrating the impact of these properties on the layout of elements within a flex container.', 'duration': 165.97, 'highlights': ['The chapter covers the usage of flexbox properties such as flex, flex-wrap, justify-content, and media queries, demonstrating their impact on element layout within a flex container.', 'Demonstrates the impact of flex-wrap property on the layout, showing how it automatically repositions elements to a new row when the designated width is not sufficient.', 'Illustrates the usage of justify-content property to align elements within a flex container, specifically focusing on center alignment for sidebar and main content.']}, {'end': 6704.137, 'start': 6347.14, 'title': 'Flexbox alignment and justification', 'summary': 'Discusses the usage of justify content property to specify the alignment of elements, including justify start, justify end, justify between, justify evenly, and align items property for vertical alignment, demonstrating their impact on the layout and distribution of elements, with a focus on creating equal space and aligning elements based on their content.', 'duration': 356.997, 'highlights': ['The chapter discusses the usage of justify content property to specify the alignment of elements, including justify start, justify end, justify between, justify evenly The chapter covers the usage of justify content property to specify the alignment of elements, such as justify start, justify end, justify between, justify evenly, demonstrating different ways to distribute and align elements along the main axis.', 'Using justify between and justify evenly to create equal space between elements The transcript explains the usage of justify between and justify evenly to create equal space between elements by distributing the available space evenly, ensuring an equal amount of space around each item.', 'Demonstrating the impact of align items property on vertical alignment The chapter illustrates the impact of align items property on vertical alignment, showing how it affects the positioning of elements along the cross axis, allowing for alignment based on the content of the elements.', 'Applying item baseline to align elements based on their content baseline The transcript details the application of item baseline to align elements based on their content baseline, irrespective of differences in height or width, ensuring alignment based on the baseline of the content.']}, {'end': 7319.333, 'start': 6709.605, 'title': 'Tailwind css grids example', 'summary': 'Discusses how to use tailwind css grids to create columns, with the ability to dynamically adjust the number of columns and their sizes, along with the use of col span to control the size of individual columns, showcasing the flexibility and functionality of grids.', 'duration': 609.728, 'highlights': ['Tailwind CSS grids allow for the dynamic creation of columns and the ability to adjust their sizes and number, offering flexibility in layout design. The grids feature allows the dynamic creation of columns, with the ability to adjust the number and sizes of columns, providing flexibility in layout design.', 'Demonstrates the use of col span to control the size of individual columns, showcasing the flexibility and functionality of grids. The use of col span is demonstrated to control the size of individual columns, illustrating the flexibility and functionality of the grids.', 'Illustrates how the grid automatically wraps elements when the specified columns exceed the available space, showcasing the responsive behavior of the grids. The automatic wrapping of elements when the specified columns exceed the available space is illustrated, showcasing the responsive behavior of the grids.', 'Introduces the use of call start and call end to position elements within the grid, demonstrating further control over the layout. The introduction of call start and call end is showcased, demonstrating further control over the positioning of elements within the grid layout.']}], 'duration': 1969.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao5350155.jpg', 'highlights': ['Demonstrates using flex property to align elements in a row and explains how to use flex to organize elements in a row or column.', 'Illustrates the use of flex, flex call, flex row, and flex row reverse to control the layout of elements, with practical examples.', 'Shows how to adjust the layout based on screen size using flex direction, with specific examples of adapting the layout for mobile screens.', 'The chapter covers the usage of flexbox properties such as flex, flex-wrap, justify-content, and media queries, demonstrating their impact on element layout within a flex container.', 'Illustrates the usage of justify-content property to align elements within a flex container, specifically focusing on center alignment for sidebar and main content.', 'The chapter covers the usage of justify content property to specify the alignment of elements, such as justify start, justify end, justify between, justify evenly, demonstrating different ways to distribute and align elements along the main axis.', 'The chapter illustrates the impact of align items property on vertical alignment, showing how it affects the positioning of elements along the cross axis, allowing for alignment based on the content of the elements.', 'The transcript details the application of item baseline to align elements based on their content baseline, irrespective of differences in height or width, ensuring alignment based on the baseline of the content.', 'The grids feature allows the dynamic creation of columns, with the ability to adjust the number and sizes of columns, providing flexibility in layout design.', 'The use of col span is demonstrated to control the size of individual columns, illustrating the flexibility and functionality of the grids.', 'The automatic wrapping of elements when the specified columns exceed the available space is illustrated, showcasing the responsive behavior of the grids.', 'The introduction of call start and call end is showcased, demonstrating further control over the positioning of elements within the grid layout.']}, {'end': 8255.58, 'segs': [{'end': 7370.999, 'src': 'embed', 'start': 7319.693, 'weight': 0, 'content': [{'end': 7321.795, 'text': "So I'm going to have a padding six.", 'start': 7319.693, 'duration': 2.102}, {'end': 7322.755, 'text': 'There we go.', 'start': 7322.255, 'duration': 0.5}, {'end': 7327.718, 'text': 'And what I want to add also is a rounded LG.', 'start': 7323.456, 'duration': 4.262}, {'end': 7332.061, 'text': "So I'm going to put rounded LG to add some a bit of design.", 'start': 7327.898, 'duration': 4.163}, {'end': 7332.461, 'text': 'There we go.', 'start': 7332.101, 'duration': 0.36}, {'end': 7341.847, 'text': 'So we see that we have a first column 01 and we will need to take four space, four space on six.', 'start': 7333.262, 'duration': 8.585}, {'end': 7348.6, 'text': "So basically, it's supposed to start actually at one here.", 'start': 7343.576, 'duration': 5.024}, {'end': 7349.941, 'text': "It's supposed to be the first column.", 'start': 7348.68, 'duration': 1.261}, {'end': 7357.128, 'text': 'But we specify with call start that we want it to start on the second column.', 'start': 7350.502, 'duration': 6.626}, {'end': 7362.612, 'text': 'And the second column is supposed to start here because we supposed to have six column before, okay?', 'start': 7357.168, 'duration': 5.444}, {'end': 7370.739, 'text': "So if I put call start three, what's gonna happen is that my element is going to start on the third column.", 'start': 7363.473, 'duration': 7.266}, {'end': 7370.999, 'text': 'all right?', 'start': 7370.739, 'duration': 0.26}], 'summary': 'Adding padding and rounded lg to the design, specifying column start positions.', 'duration': 51.306, 'max_score': 7319.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7319693.jpg'}, {'end': 7538.437, 'src': 'embed', 'start': 7485.95, 'weight': 2, 'content': [{'end': 7493.614, 'text': 'okay?. So grid auto-colon helps you to deal with the size automatically of the content of the column.', 'start': 7485.95, 'duration': 7.664}, {'end': 7496.035, 'text': "We've talked about the columns with grid.", 'start': 7493.894, 'duration': 2.141}, {'end': 7498.096, 'text': "Now let's talk about the rows.", 'start': 7496.475, 'duration': 1.621}, {'end': 7505.04, 'text': 'Because yes, we have grid calls one, two, three, four, five, until 12, but we also have grid rows.', 'start': 7498.596, 'duration': 6.444}, {'end': 7512.842, 'text': 'of course you understood that now grid rows is used to display in columns, our element.', 'start': 7505.8, 'duration': 7.042}, {'end': 7516.923, 'text': "so it's working exactly the same as columns.", 'start': 7512.842, 'duration': 4.081}, {'end': 7519.923, 'text': 'however, it goes to maximum six.', 'start': 7516.923, 'duration': 3}, {'end': 7526.145, 'text': 'okay, so we got grid row six as a maximum value, and here we got an example all our rows.', 'start': 7519.923, 'duration': 6.222}, {'end': 7538.437, 'text': 'all right, a display like this one, two, three, four, five, six, seven, eight, and to do that we use actually, okay, we use grid rows.', 'start': 7526.145, 'duration': 12.292}], 'summary': 'Grid rows have a maximum of six values for displaying elements in columns.', 'duration': 52.487, 'max_score': 7485.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7485950.jpg'}, {'end': 7709.567, 'src': 'embed', 'start': 7679.901, 'weight': 4, 'content': [{'end': 7685.486, 'text': "So I'm going to go there and on the first element I'm going to put row span two, all right?", 'start': 7679.901, 'duration': 5.585}, {'end': 7689.61, 'text': "And what's gonna happen now is that there we go.", 'start': 7686.187, 'duration': 3.423}, {'end': 7692.893, 'text': 'my first element took two rows.', 'start': 7689.61, 'duration': 3.283}, {'end': 7703.762, 'text': "And if I put row span three, it's going to take three rows, okay? And let's go on the fifth element and let's add also row span three.", 'start': 7693.453, 'duration': 10.309}, {'end': 7705.303, 'text': "Let's look at it.", 'start': 7704.683, 'duration': 0.62}, {'end': 7706.745, 'text': 'There we go.', 'start': 7706.244, 'duration': 0.501}, {'end': 7709.567, 'text': 'We see that five took three space.', 'start': 7706.785, 'duration': 2.782}], 'summary': 'Demonstrating rowspan feature: 1st element spans 2 rows, 5th spans 3 rows.', 'duration': 29.666, 'max_score': 7679.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7679901.jpg'}, {'end': 7963.387, 'src': 'embed', 'start': 7932.248, 'weight': 5, 'content': [{'end': 7934.269, 'text': 'So Grid is very, very useful.', 'start': 7932.248, 'duration': 2.021}, {'end': 7939.892, 'text': 'And actually, you will use Grid all the time when you start to code with Tailwind.', 'start': 7935.169, 'duration': 4.723}, {'end': 7947.437, 'text': 'however, you have to understand what are columns, what are rows, how to display the sizes,', 'start': 7940.572, 'duration': 6.865}, {'end': 7957.824, 'text': "but also what you need to deal with is the auto flow of your element, and there we've got a good example on how we can fulfill empty spaces,", 'start': 7947.437, 'duration': 10.387}, {'end': 7963.387, 'text': "because this is what you're gonna have most of the time as a problem on flex and grid.", 'start': 7957.824, 'duration': 5.563}], 'summary': 'Understanding grid layout is essential for coding with tailwind, particularly handling auto flow and empty spaces.', 'duration': 31.139, 'max_score': 7932.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7932248.jpg'}, {'end': 8267.027, 'src': 'embed', 'start': 8232.295, 'weight': 6, 'content': [{'end': 8235.897, 'text': 'there we go and we see that here on container center.', 'start': 8232.295, 'duration': 3.602}, {'end': 8239.839, 'text': 'true, i can automatically center my container.', 'start': 8235.897, 'duration': 3.942}, {'end': 8248.404, 'text': "okay, so now i'm gonna go on tailwind.config.js and here on my team, what i can do is put container center true,", 'start': 8239.839, 'duration': 8.565}, {'end': 8252.678, 'text': "So it's supposed to center my container automatically.", 'start': 8249.116, 'duration': 3.562}, {'end': 8255.58, 'text': 'And we see now that it is working.', 'start': 8253.339, 'duration': 2.241}, {'end': 8267.027, 'text': "A last thing with container is that, as you see here, I'm going to have content that will stick, actually, that will stick to my border.", 'start': 8256.2, 'duration': 10.827}], 'summary': 'Using the tailwind.config.js file to auto-center the container.', 'duration': 34.732, 'max_score': 8232.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao8232295.jpg'}], 'start': 7319.693, 'title': 'Grid layout and tailwind css', 'summary': 'Covers grid column specification with examples of call start 3 and 4, and the impact on column positioning, usage of grid auto columns and grid rows in the grid system, and implementation of grid layout with automatic placement and handling of empty spaces. it also discusses the use of containers to control the size and centering of elements based on tailwind css breakpoints.', 'chapters': [{'end': 7401.076, 'start': 7319.693, 'title': 'Grid column specification', 'summary': 'Discusses the grid column specification, including padding, rounded lg, and the use of call start to control the start and end positions of columns, with examples of call start 3 and 4, and the impact on column positioning.', 'duration': 81.383, 'highlights': ['The chapter discusses the use of call start to control the start and end positions of columns, with examples of call start 3 and 4, and the impact on column positioning.', 'Explanation of how call start 3 results in the element starting on the third column.', 'Demonstration of specifying the start and stop positions of a column using call start and the impact on column positioning.', 'Introduction of rounded LG to add design to the grid layout.']}, {'end': 7739.686, 'start': 7401.076, 'title': 'Grid system and auto sizing', 'summary': 'Explains the usage of grid auto columns and grid rows in the grid system, demonstrating how grid auto columns automatically adjust column size based on content and how grid rows control the arrangement of elements in columns with the flexibility to specify the number of rows an element should occupy within a column.', 'duration': 338.61, 'highlights': ['The chapter explains the usage of grid auto columns and grid rows in the grid system, demonstrating how grid auto columns automatically adjust column size based on content and how grid rows control the arrangement of elements in columns with the flexibility to specify the number of rows an element should occupy within a column. grid auto columns, grid rows, specifying row size', 'The explanation of grid auto columns showcases its functionality in automatically adjusting the size of columns based on their content, resembling the behavior of flex but for automatic sizing. automatic column sizing, comparison with flex behavior', 'Demonstration of grid rows highlights its role in controlling the arrangement of elements in columns and the flexibility to specify the number of rows an element should occupy within a column, with a maximum value of six rows per element. controlling element arrangement, maximum six rows per element', 'The use of row span is exemplified to illustrate how elements can be specified to occupy a specific number of rows within a column, with the example showing the impact of specifying different row spans for elements within a column. example of specifying row spans for elements']}, {'end': 8255.58, 'start': 7740.327, 'title': 'Using grid and containers in tailwind css', 'summary': "Discusses the implementation of grid layout with automatic placement and handling of empty spaces, demonstrating how to use 'grid flow: row dense' and 'col span' to manage the layout effectively, and then illustrates the use of containers to control the size and centering of elements based on tailwind css breakpoints.", 'duration': 515.253, 'highlights': ["The chapter demonstrates the use of grid flow: row dense to automatically place elements and handle empty spaces in the grid layout, showcasing the effective use of 'col span' to manage the layout without empty spaces, and explains how it fulfills the space automatically, showcasing the practical applications of Grid layout in Tailwind CSS.", "The transcript also explains the concept of containers in Tailwind CSS, highlighting the use of the 'container' class and its responsiveness to different screen sizes based on Tailwind CSS breakpoints, and demonstrates how to center the container using 'mx-auto' or configuring 'container center true' in tailwind.config.js to achieve automatic centering of containers."]}], 'duration': 935.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao7319693.jpg', 'highlights': ['Demonstration of specifying the start and stop positions of a column using call start and the impact on column positioning.', 'Introduction of rounded LG to add design to the grid layout.', 'Demonstration of grid auto columns showcases its functionality in automatically adjusting the size of columns based on their content, resembling the behavior of flex but for automatic sizing.', 'Demonstration of grid rows highlights its role in controlling the arrangement of elements in columns and the flexibility to specify the number of rows an element should occupy within a column, with a maximum value of six rows per element.', 'The use of row span is exemplified to illustrate how elements can be specified to occupy a specific number of rows within a column, with the example showing the impact of specifying different row spans for elements within a column.', "The chapter demonstrates the use of grid flow: row dense to automatically place elements and handle empty spaces in the grid layout, showcasing the effective use of 'col span' to manage the layout without empty spaces, and explains how it fulfills the space automatically, showcasing the practical applications of Grid layout in Tailwind CSS.", "The transcript also explains the concept of containers in Tailwind CSS, highlighting the use of the 'container' class and its responsiveness to different screen sizes based on Tailwind CSS breakpoints, and demonstrates how to center the container using 'mx-auto' or configuring 'container center true' in tailwind.config.js to achieve automatic centering of containers."]}, {'end': 10605.811, 'segs': [{'end': 8480.189, 'src': 'heatmap', 'start': 8323.07, 'weight': 0.816, 'content': [{'end': 8329.995, 'text': "so let's say that here i'm gonna have a first paragraph with one row m ipsu.", 'start': 8323.07, 'duration': 6.925}, {'end': 8331.916, 'text': 'then i will have another one.', 'start': 8329.995, 'duration': 1.921}, {'end': 8335.821, 'text': 'actually there we go, and then i will have another one again.', 'start': 8331.916, 'duration': 3.905}, {'end': 8340.966, 'text': "okay, so i got these three paragraph and when i get back there we go, i'm there.", 'start': 8335.821, 'duration': 5.145}, {'end': 8343.608, 'text': "so i'm going to remove this bg red 500.", 'start': 8340.966, 'duration': 2.642}, {'end': 8344.388, 'text': 'that is useless.', 'start': 8343.608, 'duration': 0.78}, {'end': 8345.69, 'text': 'for now, there we go.', 'start': 8344.388, 'duration': 1.302}, {'end': 8352.893, 'text': "And if I use, for instance, colon three, because I got three elements, let's try it in there.", 'start': 8346.731, 'duration': 6.162}, {'end': 8354.772, 'text': "Colons three, I'm going to save.", 'start': 8353.233, 'duration': 1.539}, {'end': 8356.112, 'text': "I'm going to update.", 'start': 8354.793, 'duration': 1.319}, {'end': 8357.234, 'text': 'There we go.', 'start': 8356.573, 'duration': 0.661}, {'end': 8360.995, 'text': 'Suddenly, my content is on three columns.', 'start': 8357.454, 'duration': 3.541}, {'end': 8365.675, 'text': 'But what happens if I put a fourth column? All right.', 'start': 8361.495, 'duration': 4.18}, {'end': 8366.335, 'text': 'And I save.', 'start': 8365.835, 'duration': 0.5}, {'end': 8369.617, 'text': "where actually, and we don't see it.", 'start': 8367.175, 'duration': 2.442}, {'end': 8372.337, 'text': "we don't see where it is actually.", 'start': 8369.617, 'duration': 2.72}, {'end': 8378.218, 'text': "it doesn't change anything, because all your content is going to be fulfilled on three different columns.", 'start': 8372.337, 'duration': 5.881}, {'end': 8389.081, 'text': "okay, so if i just copy this, okay, and i had it there, it's going to continue and all the content will be displayed on three columns.", 'start': 8378.218, 'duration': 10.863}, {'end': 8394.449, 'text': "okay, let's say that now i want to have two columns And suddenly I will have two columns.", 'start': 8389.081, 'duration': 5.368}, {'end': 8396.849, 'text': "Let's say that I want to have 12 columns.", 'start': 8394.849, 'duration': 2}, {'end': 8398.11, 'text': 'It will be weird.', 'start': 8397.29, 'duration': 0.82}, {'end': 8399.23, 'text': 'There we go.', 'start': 8398.75, 'duration': 0.48}, {'end': 8402.391, 'text': "We've got our content on 12 columns.", 'start': 8399.31, 'duration': 3.081}, {'end': 8404.332, 'text': 'Okay So this is how it works.', 'start': 8402.631, 'duration': 1.701}, {'end': 8414.175, 'text': "However, if you want to have, for instance, a specific size, let's say that we want to have a small column of five columns lg.", 'start': 8404.672, 'duration': 9.503}, {'end': 8418.716, 'text': "let's take it we to get back there, i'm going to use columns lg.", 'start': 8414.175, 'duration': 4.541}, {'end': 8426.677, 'text': "what's going to happen is that the size of the column that will be displayed will be automatically lg, so 500 or something,", 'start': 8418.716, 'duration': 7.961}, {'end': 8430.458, 'text': "and what we like is that it's automatically responsive.", 'start': 8426.677, 'duration': 3.781}, {'end': 8432.758, 'text': 'so this is how you would use colon.', 'start': 8430.458, 'duration': 2.3}, {'end': 8434.699, 'text': "but let's try now with an image.", 'start': 8432.758, 'duration': 1.941}, {'end': 8444.429, 'text': "so i'm going to copy this image there and let's say that i'm going to add an image and it's going to be this one, and when i'm going to save there,", 'start': 8434.699, 'duration': 9.73}, {'end': 8453.219, 'text': 'we go suddenly see that the image is taking the whole size and the text is on the right, all right.', 'start': 8444.429, 'duration': 8.79}, {'end': 8455.482, 'text': 'which is cool is that, and we get the example there.', 'start': 8453.219, 'duration': 2.263}, {'end': 8463.529, 'text': "Depending on the elements that you get and depending on the size, it's going to adapt itself automatically.", 'start': 8456.343, 'duration': 7.186}, {'end': 8467.832, 'text': "And that's something that we want when we are dealing with columns.", 'start': 8463.949, 'duration': 3.883}, {'end': 8470.594, 'text': "Let's talk now about the display.", 'start': 8468.512, 'duration': 2.082}, {'end': 8474.317, 'text': 'We often use the display with Tairin CSS.', 'start': 8470.994, 'duration': 3.323}, {'end': 8480.189, 'text': "So we've got, basically, the basic display that we can have in CSS.", 'start': 8474.937, 'duration': 5.252}], 'summary': 'Demonstration of using columns in css for responsive design.', 'duration': 157.119, 'max_score': 8323.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao8323070.jpg'}, {'end': 9461.72, 'src': 'embed', 'start': 9437.324, 'weight': 11, 'content': [{'end': 9445.75, 'text': 'you got also the box decoration break okay, so here you see that you can create some decoration and you want this decoration to break or not.', 'start': 9437.324, 'duration': 8.426}, {'end': 9447.893, 'text': 'You got box sizing.', 'start': 9446.872, 'duration': 1.021}, {'end': 9449.553, 'text': "To be honest, I don't use it that much.", 'start': 9447.953, 'duration': 1.6}, {'end': 9456.157, 'text': 'But you can deal with actually how the browser should calculate an element total size.', 'start': 9450.414, 'duration': 5.743}, {'end': 9457.077, 'text': 'All right.', 'start': 9456.777, 'duration': 0.3}, {'end': 9461.72, 'text': "And what you have also, it's the overscroll behavior.", 'start': 9457.998, 'duration': 3.722}], 'summary': 'Css properties include box decoration, box sizing, and overscroll behavior.', 'duration': 24.396, 'max_score': 9437.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao9437324.jpg'}, {'end': 9747.397, 'src': 'embed', 'start': 9722.01, 'weight': 9, 'content': [{'end': 9727.592, 'text': 'So if you put border dotted, You will have actually the border dotted.', 'start': 9722.01, 'duration': 5.582}, {'end': 9728.572, 'text': 'Okay All right.', 'start': 9727.832, 'duration': 0.74}, {'end': 9729.772, 'text': 'It can be useful sometimes.', 'start': 9728.612, 'duration': 1.16}, {'end': 9730.313, 'text': 'You never know.', 'start': 9729.812, 'duration': 0.501}, {'end': 9733.133, 'text': 'Or you can have the border double.', 'start': 9731.073, 'duration': 2.06}, {'end': 9735.654, 'text': 'If I update, there we go.', 'start': 9733.673, 'duration': 1.981}, {'end': 9737.654, 'text': "We've got the border double.", 'start': 9735.754, 'duration': 1.9}, {'end': 9742.796, 'text': 'Okay With border style also, you can specify border known.', 'start': 9737.915, 'duration': 4.881}, {'end': 9743.516, 'text': 'There we go.', 'start': 9743.156, 'duration': 0.36}, {'end': 9745.276, 'text': "If you don't want to have a border.", 'start': 9743.896, 'duration': 1.38}, {'end': 9747.397, 'text': 'This is how you deal with border styles.', 'start': 9745.316, 'duration': 2.081}], 'summary': 'Demonstration of specifying border styles in html.', 'duration': 25.387, 'max_score': 9722.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao9722010.jpg'}, {'end': 9848.57, 'src': 'embed', 'start': 9824.609, 'weight': 10, 'content': [{'end': 9831.294, 'text': 'so here i got my button c And with outline, outline offset and outline 4..', 'start': 9824.609, 'duration': 6.685}, {'end': 9839.541, 'text': 'Now you understood that outline 4 is for the size of the outline and the offset is for the space between the element and the outline.', 'start': 9831.294, 'duration': 8.247}, {'end': 9840.662, 'text': 'So there we go.', 'start': 9839.581, 'duration': 1.081}, {'end': 9848.57, 'text': "we've got something not really nice there, but we see that we've got some kind of like a border, but it's creating actually an outline.", 'start': 9840.662, 'duration': 7.908}], 'summary': 'Using outline 4 for size and offset to create a border-like outline.', 'duration': 23.961, 'max_score': 9824.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao9824609.jpg'}, {'end': 9965.348, 'src': 'embed', 'start': 9931.135, 'weight': 5, 'content': [{'end': 9934.278, 'text': 'If you really want to work on the accessibility of your app,', 'start': 9931.135, 'duration': 3.143}, {'end': 9940.784, 'text': 'you are going to use all those classes and all those elements provided by Tailwind to improve this accessibility.', 'start': 9934.278, 'duration': 6.506}, {'end': 9951.964, 'text': "if you want to use box shadow or effects on your elements with taywin css, it's possible.", 'start': 9945.862, 'duration': 6.102}, {'end': 9957.926, 'text': 'here i got an application running and i got a card and in this card i got some text, a button.', 'start': 9951.964, 'duration': 5.962}, {'end': 9965.348, 'text': 'but the thing is that this card is white on a white background and i would like to give some effects, some perspective.', 'start': 9957.926, 'duration': 7.422}], 'summary': 'Tailwind css provides classes for improving app accessibility and adding effects to elements.', 'duration': 34.213, 'max_score': 9931.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao9931135.jpg'}, {'end': 10020.637, 'src': 'embed', 'start': 9984.903, 'weight': 6, 'content': [{'end': 9987.465, 'text': 'a bit of presence inside my application.', 'start': 9984.903, 'duration': 2.562}, {'end': 9989.527, 'text': "okay, that's really cool.", 'start': 9987.465, 'duration': 2.062}, {'end': 9992.209, 'text': "but let's say that i would like to have a bigger shadow.", 'start': 9989.527, 'duration': 2.682}, {'end': 9999.195, 'text': "it's possible, always with tailwind, with the size element that we can use.", 'start': 9992.209, 'duration': 6.986}, {'end': 10002.058, 'text': "So we got medium, but let's try with large.", 'start': 9999.235, 'duration': 2.823}, {'end': 10005.902, 'text': 'And we will see that suddenly we got a bit more shadow.', 'start': 10002.899, 'duration': 3.003}, {'end': 10010.807, 'text': 'And if we go down, we can see that we have several sizes.', 'start': 10006.763, 'duration': 4.044}, {'end': 10020.637, 'text': 'medium large excel to excel that actually create a specific shadow already determined by tailwind.', 'start': 10011.528, 'duration': 9.109}], 'summary': 'Using tailwind, different shadow sizes like medium, large, and extra large can be applied to create specific shadows within applications.', 'duration': 35.734, 'max_score': 9984.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao9984903.jpg'}, {'end': 10193.821, 'src': 'embed', 'start': 10165.039, 'weight': 7, 'content': [{'end': 10173.825, 'text': "so, as i told you, you can work also with the opacity of elements on tailwind css and here we've got the opacity of the elements.", 'start': 10165.039, 'duration': 8.786}, {'end': 10176.106, 'text': 'so which is very useful sometimes.', 'start': 10173.825, 'duration': 2.281}, {'end': 10183.572, 'text': 'because, um, what we would like to do is to say, yeah, if this button is disabled, i would like to add some opacity.', 'start': 10176.106, 'duration': 7.466}, {'end': 10184.893, 'text': "okay, it's possible.", 'start': 10183.572, 'duration': 1.321}, {'end': 10193.821, 'text': "well, we're gonna try just this if i put opacity five, okay, what's gonna happen is that my button is going to almost disappear.", 'start': 10184.893, 'duration': 8.928}], 'summary': 'Tailwind css allows adjusting element opacity, with opacity 5 making button nearly disappear.', 'duration': 28.782, 'max_score': 10165.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10165039.jpg'}, {'end': 10310.091, 'src': 'embed', 'start': 10236.958, 'weight': 0, 'content': [{'end': 10240.581, 'text': 'But you can control how elements should blend with background.', 'start': 10236.958, 'duration': 3.623}, {'end': 10247.147, 'text': 'OK, so as you see, you can mix two elements and it will mix the colors automatically.', 'start': 10240.681, 'duration': 6.466}, {'end': 10249.749, 'text': 'This is how it works with mix blend mode.', 'start': 10247.647, 'duration': 2.102}, {'end': 10254.572, 'text': 'And you can also work with the background blend mode with actually.', 'start': 10250.169, 'duration': 4.403}, {'end': 10259.475, 'text': 'helps you to deal with the color, et cetera, et cetera.', 'start': 10255.353, 'duration': 4.122}, {'end': 10261.015, 'text': 'It can be useful.', 'start': 10259.895, 'duration': 1.12}, {'end': 10263.757, 'text': 'I have to admit that for me, I never had to use it.', 'start': 10261.536, 'duration': 2.221}, {'end': 10267.878, 'text': "It can be useless, but if you look for it, it's in the effect column there.", 'start': 10264.237, 'duration': 3.641}, {'end': 10271.8, 'text': "Let's talk now about the filters, and filters are very,", 'start': 10268.058, 'duration': 3.742}, {'end': 10283.785, 'text': "very useful because they help you to deal with images and you're not obliged to send back the image to Photoshop or just to call your graphist or designer to change the image.", 'start': 10271.8, 'duration': 11.985}, {'end': 10285.945, 'text': 'you can use Tailwind to do it.', 'start': 10284.225, 'duration': 1.72}, {'end': 10287.706, 'text': "so let's talk about the blur.", 'start': 10285.945, 'duration': 1.761}, {'end': 10292.967, 'text': "so here in my example, I've got a card like it's a card for a blog,", 'start': 10287.706, 'duration': 5.261}, {'end': 10298.548, 'text': "and we would have an image there that I picked up on Unsplash and what I'm gonna do.", 'start': 10292.967, 'duration': 5.581}, {'end': 10306.21, 'text': "I'm going to blur this image and, as we see, Tailwind provide to us a blur class that I can use.", 'start': 10298.548, 'duration': 7.662}, {'end': 10307.55, 'text': "So what I'm going to do?", 'start': 10306.83, 'duration': 0.72}, {'end': 10310.091, 'text': "I'm going to take the blur SM on the image there.", 'start': 10307.55, 'duration': 2.541}], 'summary': 'Tailwind css allows blending elements, applying background blend mode, and using filters such as blur to manipulate images.', 'duration': 73.133, 'max_score': 10236.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10236958.jpg'}, {'end': 10409.768, 'src': 'embed', 'start': 10380.446, 'weight': 3, 'content': [{'end': 10381.346, 'text': "I'm going to get back.", 'start': 10380.446, 'duration': 0.9}, {'end': 10382.326, 'text': 'I got my image there.', 'start': 10381.406, 'duration': 0.92}, {'end': 10385.267, 'text': "And let's say that I want to work on the brightness.", 'start': 10382.826, 'duration': 2.441}, {'end': 10390.248, 'text': 'I can use brightness and the values comes from 0 to 200.', 'start': 10385.407, 'duration': 4.841}, {'end': 10391.81, 'text': "okay, so what I'm gonna do?", 'start': 10390.248, 'duration': 1.562}, {'end': 10401.519, 'text': "there I get the image, I'm going to add brightness 125 on the image and when I update, suddenly my image is brighter.", 'start': 10391.81, 'duration': 9.709}, {'end': 10406.284, 'text': 'okay. so you can use brighter to improve or to lower.', 'start': 10401.519, 'duration': 4.765}, {'end': 10408.667, 'text': "actually, and let's try to lower it.", 'start': 10406.284, 'duration': 2.383}, {'end': 10409.768, 'text': "let's put 50 instead.", 'start': 10408.667, 'duration': 1.101}], 'summary': 'Adjusting image brightness from 125 to 50 to control its luminosity.', 'duration': 29.322, 'max_score': 10380.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10380446.jpg'}, {'end': 10499.146, 'src': 'embed', 'start': 10440.008, 'weight': 2, 'content': [{'end': 10442.389, 'text': "so that's a nice effect that we can use.", 'start': 10440.008, 'duration': 2.381}, {'end': 10445.97, 'text': 'also, sometimes we can use the brightness.', 'start': 10442.389, 'duration': 3.581}, {'end': 10446.751, 'text': 'in contrary.', 'start': 10445.97, 'duration': 0.781}, {'end': 10448.871, 'text': "let's talk about the contrast.", 'start': 10446.751, 'duration': 2.12}, {'end': 10450.732, 'text': 'we can use also the contrast.', 'start': 10448.871, 'duration': 1.861}, {'end': 10457.515, 'text': "so let's say that we're gonna have a contrast and it's a bit different, but it looks like the same effect.", 'start': 10450.732, 'duration': 6.783}, {'end': 10459.375, 'text': 'okay, so contrast 50.', 'start': 10457.515, 'duration': 1.86}, {'end': 10461.016, 'text': "so i'm gonna update.", 'start': 10459.375, 'duration': 1.641}, {'end': 10463.016, 'text': 'okay, there we go.', 'start': 10461.016, 'duration': 2}, {'end': 10468.437, 'text': 'so we pass from gray to a normal contrasted car.', 'start': 10463.016, 'duration': 5.421}, {'end': 10478.859, 'text': "we have the filter drop shadow that help us to drop some shadow, which is basically the same as the shadow we saw before we've got the grayscale.", 'start': 10468.437, 'duration': 10.422}, {'end': 10481.52, 'text': 'so grayscale can be really really useful.', 'start': 10478.859, 'duration': 2.661}, {'end': 10483.24, 'text': "so let's try again.", 'start': 10481.52, 'duration': 1.72}, {'end': 10491.522, 'text': "let's put grayscale, for instance, and suddenly we got our post in in grayscale.", 'start': 10483.24, 'duration': 8.282}, {'end': 10496.205, 'text': 'but on hover, if we want to remove it, we can put grayscale, zero.', 'start': 10491.522, 'duration': 4.683}, {'end': 10499.146, 'text': "so i'm going to put grayscale and zero.", 'start': 10496.205, 'duration': 2.941}], 'summary': 'Using contrast and grayscale effects, achieving different visual outcomes.', 'duration': 59.138, 'max_score': 10440.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10440008.jpg'}], 'start': 8256.2, 'title': 'Css layout and effects', 'summary': 'Covers container padding, tailored layouts, css display properties, positioning, overflow, layout elements, tailwind css shadow effects, and filters. it provides practical examples and use cases for each property and includes quantifiable data for tailwind css filters.', 'chapters': [{'end': 8455.482, 'start': 8256.2, 'title': 'Container padding and tailoring layouts', 'summary': 'Discusses the importance of adding padding inside a container to prevent content from sticking to the border and demonstrates how to tailor layouts using columns with different sizes and responsiveness.', 'duration': 199.282, 'highlights': ["Adding padding inside a container to prevent content from sticking to the border It's always better to add padding inside the container to avoid unwanted space on mobile, providing a tip for dealing with padding inside the container.", 'Demonstrating the use of columns with different sizes and responsiveness Shows how to create several columns with different elements using classes columns 1 to 12 and sizes of the column, with a demonstration of the result and how to use specific sizes for columns, ensuring automatic responsiveness.', 'Illustrating the use of images and text with responsive layout Demonstrates how an image can take the whole size with text on the right, highlighting the cool feature of responsive layout.']}, {'end': 9418.68, 'start': 8456.343, 'title': 'Css display, positioning, and overflow', 'summary': 'Covers css display properties like block, inline, and flex, along with positioning elements using float, clear, absolute, relative, inset, fixed, overflow, visibility, z-index, and object positioning, providing practical examples and use cases for each property.', 'duration': 962.337, 'highlights': ['The chapter covers CSS display properties like block, inline, and flex, along with practical examples of using these properties for layout design. The transcript discusses the usage of CSS display properties such as block, inline, and flex, providing practical examples and use cases for layout design.', 'The transcript includes detailed explanations and examples of using positioning properties like float, clear, absolute, relative, and inset for element placement. The transcript provides detailed explanations and examples of using positioning properties like float, clear, absolute, relative, and inset for element placement.', 'It explains the usage of overflow properties, including auto, hidden, and scroll, with practical examples demonstrating their effects on element visibility and scrolling behavior. The transcript explains the usage of overflow properties such as auto, hidden, and scroll, with practical examples demonstrating their effects on element visibility and scrolling behavior.', 'The chapter discusses visibility properties and their differences from display properties, illustrating the usage of visibility hidden and visibility visible with practical examples. The chapter discusses visibility properties and their differences from display properties, illustrating the usage of visibility hidden and visibility visible with practical examples.', 'It covers z-index property and its role in controlling the stacking order of elements, providing examples to demonstrate the concept. The transcript covers the z-index property and its role in controlling the stacking order of elements, providing examples to demonstrate the concept.', 'The transcript explains object positioning and its practical usage for controlling the position of images within elements, offering examples of object center, top, left, and right positions. The transcript explains object positioning and its practical usage for controlling the position of images within elements, offering examples of object center, top, left, and right positions.']}, {'end': 9874.562, 'start': 9418.7, 'title': 'Layout elements in css', 'summary': 'Covers various layout elements in css such as box decoration break, overscroll behavior, and different border properties including width, color, and style. it also explains the usage of outline to add an outline to an element with different properties such as size, offset, and color.', 'duration': 455.862, 'highlights': ['The chapter covers various border properties including width, color, and style. The chapter discusses adding borders with different widths, colors, and styles, demonstrating how to create thicker borders and specify border styles such as dashed, dotted, and double.', 'Explains the usage of outline to add an outline to an element with different properties such as size, offset, and color. The usage of outline is explained, including adding an outline to an element with different properties such as size (outline 4), offset (outline offset), color (outline the color), and styles (dash, dot, double).', 'Provides insights into box decoration break, overscroll behavior, and the divide class for creating divisions between elements. The chapter provides insights into box decoration break, overscroll behavior, and the divide class, demonstrating how to create divisions between elements and reverse the divide with different colors and styles.']}, {'end': 10263.757, 'start': 9874.562, 'title': 'Tailwind css shadow effects', 'summary': 'Covers the implementation of box shadows and effects using tailwind css, including the application of ring effects, box shadows, shadow sizes, and opacity for elements, with specific examples and practical use cases.', 'duration': 389.195, 'highlights': ['The application of ring effects and box shadows using Tailwind CSS, to improve accessibility and add effects to elements. The chapter covers the application of ring effects and box shadows using Tailwind CSS to improve accessibility and add effects to elements, with specific examples and practical use cases.', 'Demonstration of applying shadow sizes and colors using Tailwind CSS, with examples of shadow MD, large, and xl, as well as the customization of shadow colors and opacities. The transcript demonstrates the application of shadow sizes and colors using Tailwind CSS, with examples of shadow MD, large, and xl, as well as the customization of shadow colors and opacities.', 'The potential use of opacity for elements made by Tailwind CSS, including the practical application of opacity for disabled buttons. The transcript discusses the potential use of opacity for elements made by Tailwind CSS, including the practical application of opacity for disabled buttons and its impact on the appearance and functionality.', 'Overview of mix blend mode in Tailwind CSS for controlling how elements blend with the background. The chapter provides an overview of mix blend mode in Tailwind CSS for controlling how elements blend with the background, providing insights into its potential use for color blending and visual effects.']}, {'end': 10605.811, 'start': 10264.237, 'title': 'Using tailwind css filters', 'summary': 'Discusses the usage of tailwind css filters including blur, brightness, contrast, grayscale, drop shadow, hue-rotate, invert, saturate, and sepia, with examples and quantifiable data.', 'duration': 341.574, 'highlights': ['Tailwind provides classes for blur, brightness, contrast, grayscale, drop shadow, hue-rotate, invert, saturate, and sepia filters. The chapter discusses the usage of Tailwind CSS filters including blur, brightness, contrast, grayscale, drop shadow, hue-rotate, invert, saturate, and sepia, with examples and quantifiable data.', "Demonstrates usage of blur effect with Tailwind CSS classes, providing examples of different blur sizes and the 'blur none' class to remove blur on hover. The speaker demonstrates the usage of the blur effect in Tailwind CSS, providing examples of different blur sizes and the 'blur none' class to remove blur on hover.", "Shows the application of brightness filter with values ranging from 0 to 200, altering the image's brightness level and providing an example of lowering and increasing brightness. The chapter shows the application of the brightness filter with values ranging from 0 to 200, altering the image's brightness level and providing an example of lowering and increasing brightness.", "Illustrates the use of the contrast filter and its effect on the image, demonstrating the application of the 'contrast' class and showcasing a change in the image's contrast. The chapter illustrates the use of the contrast filter and its effect on the image, demonstrating the application of the 'contrast' class and showcasing a change in the image's contrast.", "Explains the application of the grayscale filter and its use to convert the image to grayscale, with the ability to remove the effect on hover using the 'grayscale-0' class. The chapter explains the application of the grayscale filter and its use to convert the image to grayscale, with the ability to remove the effect on hover using the 'grayscale-0' class."]}], 'duration': 2349.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao8256200.jpg', 'highlights': ['Tailwind provides classes for blur, brightness, contrast, grayscale, drop shadow, hue-rotate, invert, saturate, and sepia filters.', "Demonstrates usage of blur effect with Tailwind CSS classes, providing examples of different blur sizes and the 'blur none' class to remove blur on hover.", "Illustrates the use of the contrast filter and its effect on the image, demonstrating the application of the 'contrast' class and showcasing a change in the image's contrast.", "Shows the application of brightness filter with values ranging from 0 to 200, altering the image's brightness level and providing an example of lowering and increasing brightness.", "Explains the application of the grayscale filter and its use to convert the image to grayscale, with the ability to remove the effect on hover using the 'grayscale-0' class.", 'The chapter covers the application of ring effects and box shadows using Tailwind CSS to improve accessibility and add effects to elements, with specific examples and practical use cases.', 'Demonstration of applying shadow sizes and colors using Tailwind CSS, with examples of shadow MD, large, and xl, as well as the customization of shadow colors and opacities.', 'The potential use of opacity for elements made by Tailwind CSS, including the practical application of opacity for disabled buttons.', 'Overview of mix blend mode in Tailwind CSS for controlling how elements blend with the background.', 'The chapter covers various border properties including width, color, and style, demonstrating how to create thicker borders and specify border styles such as dashed, dotted, and double.', 'Explains the usage of outline to add an outline to an element with different properties such as size, offset, and color.', 'Provides insights into box decoration break, overscroll behavior, and the divide class for creating divisions between elements.']}, {'end': 11978.862, 'segs': [{'end': 10684.163, 'src': 'embed', 'start': 10657.856, 'weight': 0, 'content': [{'end': 10665.625, 'text': 'In CSS, when you want to create an animation or a transition, you have to write the class and define it in your key element.', 'start': 10657.856, 'duration': 7.769}, {'end': 10673.194, 'text': "However, with Tailwind CSS, we got already provided classes and it's always the best to use, to be honest.", 'start': 10666.506, 'duration': 6.688}, {'end': 10675.516, 'text': 'And we can use, for instance, transition.', 'start': 10673.694, 'duration': 1.822}, {'end': 10684.163, 'text': 'so here, okay, here i got an example when i pass my mouse, the button is moving up and down.', 'start': 10676.457, 'duration': 7.706}], 'summary': 'Tailwind css provides pre-defined classes for animations and transitions, making it easier to use.', 'duration': 26.307, 'max_score': 10657.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10657856.jpg'}, {'end': 11008.852, 'src': 'embed', 'start': 10980.098, 'weight': 2, 'content': [{'end': 10984.159, 'text': 'Okay Another animation that I can use is animation ping.', 'start': 10980.098, 'duration': 4.061}, {'end': 10986.759, 'text': 'And animation ping is very cool.', 'start': 10984.839, 'duration': 1.92}, {'end': 10992.281, 'text': "However, here we won't need our button to get this animation also.", 'start': 10987.379, 'duration': 4.902}, {'end': 10996.522, 'text': 'But on the official documentation, we got a very good example.', 'start': 10992.861, 'duration': 3.661}, {'end': 11001.203, 'text': 'We often need to do notifications such as this one.', 'start': 10997.202, 'duration': 4.001}, {'end': 11005.668, 'text': 'and we would like to have something that glows animation.', 'start': 11002.083, 'duration': 3.585}, {'end': 11008.852, 'text': 'ping is really useful for that also.', 'start': 11005.668, 'duration': 3.184}], 'summary': 'Animation ping is a cool and useful feature for creating glowing notifications.', 'duration': 28.754, 'max_score': 10980.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10980098.jpg'}, {'end': 11277.245, 'src': 'embed', 'start': 11248.003, 'weight': 3, 'content': [{'end': 11258.189, 'text': 'So if you want to translate on the vertical at 25 or on the horizontal at 75, you got all those classes available there.', 'start': 11248.003, 'duration': 10.186}, {'end': 11260.09, 'text': 'Finally, we can use skew.', 'start': 11258.629, 'duration': 1.461}, {'end': 11263.352, 'text': 'And with skew, we can skew our image.', 'start': 11260.59, 'duration': 2.762}, {'end': 11264.553, 'text': "So here we've got some example.", 'start': 11263.392, 'duration': 1.161}, {'end': 11268.236, 'text': "i'm going to try to skew my image there.", 'start': 11265.353, 'duration': 2.883}, {'end': 11271.94, 'text': "so i'm going to remove this all of this transition.", 'start': 11268.236, 'duration': 3.704}, {'end': 11277.245, 'text': "there we go, skew y6, and what's gonna happen is that my image has been skewed.", 'start': 11271.94, 'duration': 5.305}], 'summary': 'The speaker discusses translating and skewing images, using specific values for translation and demonstrating skewing with an example, achieving a skew of y6.', 'duration': 29.242, 'max_score': 11248.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao11248003.jpg'}, {'end': 11482.21, 'src': 'embed', 'start': 11459.886, 'weight': 4, 'content': [{'end': 11469.376, 'text': 'and what we would like to have is a weight, a different weight for the title and subtitles in comparison to the paragraph.', 'start': 11459.886, 'duration': 9.49}, {'end': 11477.625, 'text': 'so i would go to my documentation and i will quick search there and i will type wait, and here we see that i got font weight.', 'start': 11469.376, 'duration': 8.249}, {'end': 11482.21, 'text': "so i'm going to click on that and i can see that i got different type of weight.", 'start': 11477.625, 'duration': 4.585}], 'summary': 'Requesting different weights for titles/subtitles vs. paragraphs in documentation.', 'duration': 22.324, 'max_score': 11459.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao11459886.jpg'}], 'start': 10605.811, 'title': 'Tailwind css for design and animation', 'summary': 'Covers the usage of tailwind css for image manipulation, transitions, animations, and creating a custom design system, including applying backdrop blur, using transitions for smooth animations, animation effects, and creating a custom design system with practical examples.', 'chapters': [{'end': 10652.417, 'start': 10605.811, 'title': 'Backdrop blur and image manipulation', 'summary': 'Explains the usage of backdrop blur to manipulate images, allowing for blurring, brightness adjustment, contrast, grayscale, and other filters on elements through the backdrop class.', 'duration': 46.606, 'highlights': ['Backdrop blur allows for blurring a part of the image, providing a useful technique for making the image appear while blurring specific parts.', 'The technique enables manipulation of the brightness, contrast, grayscale, and other filters on elements using the backdrop class.']}, {'end': 10923.213, 'start': 10657.856, 'title': 'Using transitions in tailwind css', 'summary': 'Discusses using transitions in tailwind css to create smooth animations, including using translate to move elements, applying transition for smoother effects, and adjusting delay and duration for transitions.', 'duration': 265.357, 'highlights': ['Tailwind CSS provides pre-defined classes, such as transition, which can be used to create smooth animations, eliminating the need to write custom CSS classes.', 'Using transform translate, elements can be moved in various directions, such as up, down, left, and right, by specifying the desired translation values, e.g., translate y-1 for moving up.', 'The transition class in Tailwind CSS allows for adding smooth effects to animations, with default settings like a 150-millisecond duration and cubic-bezier timing function.', 'Adjusting the transition delay using classes like delay-1000 can control the timing of the animation, such as making the element wait for one second before starting the animation.', 'The duration class in Tailwind CSS allows for specifying the duration of the transition, e.g., duration-1000 for a one-second transition effect.']}, {'end': 11307.701, 'start': 10923.213, 'title': 'Tailwind css animation and transformation', 'summary': 'Covers the usage of tailwind css for animations and transformations, including examples of animation effects like spin, ping, pulse, bounce, and the usage of scale, rotate, transform origin, translate, and skew with practical examples.', 'duration': 384.488, 'highlights': ['Examples of animation effects like spin, ping, pulse, and bounce are demonstrated, showcasing practical usage for loaders and notifications. The chapter provides practical examples of animation effects like spin, ping, pulse, and bounce, demonstrating their usage for loaders and notifications.', 'Practical usage of scale, rotate, transform origin, translate, and skew is illustrated with image manipulation examples, emphasizing the impact of these transformations on design elements. The chapter illustrates practical usage of scale, rotate, transform origin, translate, and skew with image manipulation examples, emphasizing their impact on design elements.', 'Detailed explanation of the usage of Tailwind CSS for animations and transformations is provided, including guidance on transition timing function and class usage. The chapter provides a detailed explanation of the usage of Tailwind CSS for animations and transformations, including guidance on transition timing function and class usage.']}, {'end': 11978.862, 'start': 11313.32, 'title': 'Creating custom design system with tailwind css', 'summary': 'Explains the process of creating a custom design system using tailwind css, including setting different sizes and weights for titles, subtitles, and paragraphs, applying margin bottoms, and using the apply directive to import classes into html tags.', 'duration': 665.542, 'highlights': ['Applying different sizes and weights for titles, subtitles, and paragraphs The speaker demonstrates setting different sizes for titles, subtitles, and paragraphs, aiming for a noticeable difference between them, and also adjusting the font weights to create varied visual styles.', 'Applying margin bottoms for titles and subtitles The speaker explains the process of adding margin bottoms to titles and subtitles to create space between the elements, while ensuring that the margin bottoms are adjusted in relation to the font sizes.', 'Using the apply directive to import classes into HTML tags The speaker showcases the use of the apply directive to import classes directly into HTML tags, enabling the automatic application of styles to the corresponding elements without the need to specify classes in the elements themselves.']}], 'duration': 1373.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao10605811.jpg', 'highlights': ['Tailwind CSS provides pre-defined classes, such as transition, which can be used to create smooth animations, eliminating the need to write custom CSS classes.', 'The transition class in Tailwind CSS allows for adding smooth effects to animations, with default settings like a 150-millisecond duration and cubic-bezier timing function.', 'Examples of animation effects like spin, ping, pulse, and bounce are demonstrated, showcasing practical usage for loaders and notifications.', 'Practical usage of scale, rotate, transform origin, translate, and skew is illustrated with image manipulation examples, emphasizing the impact of these transformations on design elements.', 'Applying different sizes and weights for titles, subtitles, and paragraphs The speaker demonstrates setting different sizes for titles, subtitles, and paragraphs, aiming for a noticeable difference between them, and also adjusting the font weights to create varied visual styles.']}, {'end': 12845.755, 'segs': [{'end': 12039.934, 'src': 'embed', 'start': 12010.062, 'weight': 0, 'content': [{'end': 12016.292, 'text': 'So when I get back and I pass my mouse on it, suddenly it passes to the purple color.', 'start': 12010.062, 'duration': 6.23}, {'end': 12017.033, 'text': 'All right.', 'start': 12016.692, 'duration': 0.341}, {'end': 12021.179, 'text': 'The thing is here, I want it to be smooth.', 'start': 12017.574, 'duration': 3.605}, {'end': 12023.323, 'text': 'I can just have transition.', 'start': 12021.74, 'duration': 1.583}, {'end': 12028.747, 'text': 'the transition class here to say, yeah, i want that.', 'start': 12024.264, 'duration': 4.483}, {'end': 12030.828, 'text': 'i got a nice transition.', 'start': 12028.747, 'duration': 2.081}, {'end': 12039.934, 'text': "okay, when i pass my mouse on it and we see it, it's a little detail, but it's working a lot on the experience.", 'start': 12030.828, 'duration': 9.106}], 'summary': 'Improving user experience by adding smooth transition on mouse hover.', 'duration': 29.872, 'max_score': 12010.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12010062.jpg'}, {'end': 12148.474, 'src': 'embed', 'start': 12087.697, 'weight': 4, 'content': [{'end': 12100.482, 'text': 'Okay, So the thing is that I will have several button on my application and those buttons will have very different behavior.', 'start': 12087.697, 'duration': 12.785}, {'end': 12101.523, 'text': 'what I want to do?', 'start': 12100.482, 'duration': 1.041}, {'end': 12108.566, 'text': "so I don't want to target all buttons, I want to target buttons with classes.", 'start': 12101.523, 'duration': 7.043}, {'end': 12121.415, 'text': "so here I'm going to add a class name and here is going to be BTN to start, because all my buttons are going to have a specific basic class to start.", 'start': 12108.566, 'duration': 12.849}, {'end': 12123.837, 'text': "So right now I'm on CSS.", 'start': 12121.956, 'duration': 1.881}, {'end': 12127.881, 'text': 'Of course, with SCSS, you could do nested CSS.', 'start': 12123.897, 'duration': 3.984}, {'end': 12131.544, 'text': "But here, just for this course, I'm going to stay on CSS.", 'start': 12128.021, 'duration': 3.523}, {'end': 12133.485, 'text': 'So here button.', 'start': 12132.124, 'duration': 1.361}, {'end': 12139.729, 'text': "okay, i will apply a class and let's just start by a basic thing.", 'start': 12134.366, 'duration': 5.363}, {'end': 12148.474, 'text': "the basic thing is that we started with a blue color for our anchors and let's say that we want to stick to this blue color there.", 'start': 12139.729, 'duration': 8.745}], 'summary': "Adding class 'btn' to target specific buttons for css styling.", 'duration': 60.777, 'max_score': 12087.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12087697.jpg'}, {'end': 12446.053, 'src': 'embed', 'start': 12412.32, 'weight': 2, 'content': [{'end': 12417.862, 'text': "So when I pass my mouse, there's this color that is slightly changing.", 'start': 12412.32, 'duration': 5.542}, {'end': 12420.843, 'text': 'We see that the color is slightly changing.', 'start': 12418.603, 'duration': 2.24}, {'end': 12425.465, 'text': 'And again, like for the anchor, we want to have something smooth.', 'start': 12421.304, 'duration': 4.161}, {'end': 12428.987, 'text': 'So what we can add is transition at the end.', 'start': 12426.226, 'duration': 2.761}, {'end': 12435.649, 'text': "So I'm adding transition, and when I update, there's a little transition there.", 'start': 12429.947, 'duration': 5.702}, {'end': 12446.053, 'text': 'And if I want to work on the delay of the transition, so I can type transition timing function, what I can do is here working on the duration.', 'start': 12436.229, 'duration': 9.824}], 'summary': 'Adding transition gives a smooth color change on mouseover.', 'duration': 33.733, 'max_score': 12412.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12412320.jpg'}, {'end': 12583.255, 'src': 'embed', 'start': 12557.434, 'weight': 3, 'content': [{'end': 12562.557, 'text': "So I'm going to remove this and it's also working.", 'start': 12557.434, 'duration': 5.123}, {'end': 12565.959, 'text': 'So when I get back and I pass my mouse, there we go.', 'start': 12562.717, 'duration': 3.242}, {'end': 12569.321, 'text': 'Our two buttons got this over effect.', 'start': 12566.199, 'duration': 3.122}, {'end': 12571.263, 'text': 'all right.', 'start': 12570.382, 'duration': 0.881}, {'end': 12573.165, 'text': "so that's really cool.", 'start': 12571.263, 'duration': 1.902}, {'end': 12578.991, 'text': 'we just created a design system for our button really quick.', 'start': 12573.165, 'duration': 5.826}, {'end': 12583.255, 'text': 'what we could do also is to work when they are disabled.', 'start': 12578.991, 'duration': 4.264}], 'summary': 'Created a design system for two buttons with hover effect.', 'duration': 25.821, 'max_score': 12557.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12557434.jpg'}, {'end': 12762.943, 'src': 'embed', 'start': 12732.371, 'weight': 5, 'content': [{'end': 12734.712, 'text': "For now, I'm just going to start with that.", 'start': 12732.371, 'duration': 2.341}, {'end': 12742.455, 'text': "So I'm going to apply outline known and i'm going to apply also border, because i want that.", 'start': 12735.272, 'duration': 7.183}, {'end': 12747.577, 'text': "my input has a border and naturally we've got this nice border.", 'start': 12742.455, 'duration': 5.122}, {'end': 12751.159, 'text': 'okay, which is not very, very nice.', 'start': 12747.577, 'duration': 3.582}, {'end': 12755.861, 'text': 'what we would like to have is a, maybe a border color more gray.', 'start': 12751.159, 'duration': 4.702}, {'end': 12760.323, 'text': "so i'm going to put just a bit more of gray.", 'start': 12755.861, 'duration': 4.462}, {'end': 12762.943, 'text': 'so border slate 300, and there we go.', 'start': 12760.323, 'duration': 2.62}], 'summary': 'Applying a gray border (slate 300) to the input for a better visual appearance.', 'duration': 30.572, 'max_score': 12732.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12732371.jpg'}], 'start': 11978.862, 'title': 'Css transition and button styling', 'summary': 'Covers using css transition for smooth color change on hover and styling buttons and inputs, including adding specific classes, working on colors and transitions, creating a design system, and modifying inputs.', 'chapters': [{'end': 12039.934, 'start': 11978.862, 'title': 'Css transition for smooth color change', 'summary': 'Explains how to use css transition to smoothly change the color of text on hover, enhancing user experience with a transition class.', 'duration': 61.072, 'highlights': ['The chapter explains how to use CSS transition to smoothly change the color of text on hover.', 'The transition class enhances user experience by providing a smooth color change on hover.', 'The use of transition class significantly improves the user experience by making the color change smoother.']}, {'end': 12845.755, 'start': 12039.934, 'title': 'Styling buttons and inputs', 'summary': 'Covers styling buttons and inputs, with a focus on changing decorations and button behaviors, adding specific classes for buttons, working on colors and transitions, creating a design system for buttons, and modifying inputs by adding a border, adjusting padding, and removing the outline.', 'duration': 805.821, 'highlights': ['The chapter covers styling buttons and inputs with a focus on changing decorations and button behaviors. Focus on changing decorations and button behaviors', 'Adding specific classes for buttons and working on colors and transitions. Adding specific classes for buttons and working on colors and transitions', 'Creating a design system for buttons by modifying colors, transitions, and disabled states. Creating a design system for buttons', 'Modifying inputs by adding a border, adjusting padding, and removing the outline. Modifying inputs by adding a border, adjusting padding, and removing the outline']}], 'duration': 866.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao11978862.jpg', 'highlights': ['The use of transition class significantly improves the user experience by making the color change smoother.', 'The transition class enhances user experience by providing a smooth color change on hover.', 'The chapter explains how to use CSS transition to smoothly change the color of text on hover.', 'Creating a design system for buttons by modifying colors, transitions, and disabled states.', 'Adding specific classes for buttons and working on colors and transitions.', 'Modifying inputs by adding a border, adjusting padding, and removing the outline.', 'The chapter covers styling buttons and inputs with a focus on changing decorations and button behaviors.']}, {'end': 14148.156, 'segs': [{'end': 12902.103, 'src': 'embed', 'start': 12870.295, 'weight': 3, 'content': [{'end': 12878.713, 'text': "by default, for sure, I want to put a margin bottom of 1, because I don't want to have anything that sticks to my input.", 'start': 12870.295, 'duration': 8.418}, {'end': 12884.132, 'text': 'so I already got this and yeah, well, the thing is here.', 'start': 12879.648, 'duration': 4.484}, {'end': 12897.362, 'text': "I'm going to add a new disable background and background is going to be BG, let's say 200, even if we already got a gray one.", 'start': 12884.132, 'duration': 13.23}, {'end': 12899.103, 'text': "okay, it's too much.", 'start': 12897.362, 'duration': 1.741}, {'end': 12901.243, 'text': "let's say 100.", 'start': 12899.103, 'duration': 2.14}, {'end': 12902.103, 'text': "yeah, it's better.", 'start': 12901.243, 'duration': 0.86}], 'summary': 'Setting a margin of 1 and background to 100 to avoid input sticking.', 'duration': 31.808, 'max_score': 12870.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12870295.jpg'}, {'end': 13043.384, 'src': 'embed', 'start': 13016.309, 'weight': 1, 'content': [{'end': 13023.776, 'text': "And that's good to do that because sometimes you want in your application to keep some kind of coherence between elements.", 'start': 13016.309, 'duration': 7.467}, {'end': 13029.801, 'text': 'You want that all the elements that you have, such as this input, get the same design.', 'start': 13023.796, 'duration': 6.005}, {'end': 13038.383, 'text': "so if i'm changing one day the rounded, i just want to put rounded instead of rounded sm and i think i'm going to take that.", 'start': 13030.581, 'duration': 7.802}, {'end': 13043.384, 'text': 'as you see, it has been applied to my input date and my input text.', 'start': 13038.383, 'duration': 5.001}], 'summary': 'Maintain design coherence in application elements for consistency and efficiency.', 'duration': 27.075, 'max_score': 13016.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao13016309.jpg'}, {'end': 13434.817, 'src': 'embed', 'start': 13406.059, 'weight': 0, 'content': [{'end': 13410.461, 'text': "I'm going to put some margin on the top and on the bottom to continue the course.", 'start': 13406.059, 'duration': 4.402}, {'end': 13412.682, 'text': 'And there we go, here we are.', 'start': 13411.161, 'duration': 1.521}, {'end': 13414.483, 'text': "let's continue.", 'start': 13413.462, 'duration': 1.021}, {'end': 13418.185, 'text': "now we've got a select and the select.", 'start': 13414.483, 'duration': 3.702}, {'end': 13427.292, 'text': "it's a very good topic to work with Tailwind CSS, because there are many selects that we could create.", 'start': 13418.185, 'duration': 9.107}, {'end': 13432.856, 'text': 'the first select that we could create is the original select from HTML, which is this one.', 'start': 13427.292, 'duration': 5.564}, {'end': 13434.817, 'text': "so what i'm gonna do?", 'start': 13433.616, 'duration': 1.201}], 'summary': 'Adding margin to top and bottom for course continuation, discussing select creation with tailwind css.', 'duration': 28.758, 'max_score': 13406.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao13406059.jpg'}, {'end': 13727.431, 'src': 'embed', 'start': 13700.214, 'weight': 2, 'content': [{'end': 13708.139, 'text': "So I'm going to take all of this And I'm going to go down and it's going to go here exactly on the select.", 'start': 13700.214, 'duration': 7.925}, {'end': 13708.799, 'text': 'There we go.', 'start': 13708.419, 'duration': 0.38}, {'end': 13721.187, 'text': 'What we want to do up there on Next.js 13 is to call use client, then to use the state of React and set a variable is open on the use state false.', 'start': 13709.239, 'duration': 11.948}, {'end': 13725.85, 'text': 'So for now, our select will not be open.', 'start': 13721.908, 'duration': 3.942}, {'end': 13727.431, 'text': 'And down there.', 'start': 13726.551, 'duration': 0.88}], 'summary': 'Implementing use client in next.js 13 to set variable is open to false.', 'duration': 27.217, 'max_score': 13700.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao13700214.jpg'}], 'start': 12846.236, 'title': 'Input styling and customization', 'summary': 'Explores styling disabled input fields, applying tailwind css design tips to input elements and checkboxes, and creating custom select options with tailwind css. it also discusses customizing the styling and functionality of select elements in next.js 13.', 'chapters': [{'end': 12902.103, 'start': 12846.236, 'title': 'Styling disabled input', 'summary': 'Explores the visual effects of disabling an input field, noting that a disabled input is unclickable and has a gray background. the speaker also discusses adjusting the margin and background color for the disabled input.', 'duration': 55.867, 'highlights': ['The speaker highlights that a disabled input is unclickable and has a gray background, emphasizing the visual differences when compared to an enabled input.', 'The speaker discusses adjusting the margin bottom of the input, specifying a margin of 1 to ensure no elements stick to the input.', 'The speaker adds a new background color for the disabled input, experimenting with different shades and settling on a background color of 100.']}, {'end': 13406.039, 'start': 12902.103, 'title': 'Tailwind css design tips', 'summary': 'Discusses applying tailwind css classes to input elements, checkboxes, and labels, emphasizing achieving design consistency and addressing alignment issues. it also highlights the process of adjusting checkbox appearance and aligning text with checkboxes using tailwind css.', 'duration': 503.936, 'highlights': ['The chapter emphasizes the importance of maintaining design coherence across elements in the application, using the example of applying consistent design classes to input elements, showcasing how the same class is applied to input date and input text, ensuring uniformity (e.g., rounded edges, text color).', "The speaker demonstrates the use of Tailwind CSS to adjust the appearance of checkboxes, illustrating how to change the checkbox color by using the 'accent' class and addressing the issue of checkbox appearance consistency, highlighting the process of removing the 'appearance-none' class and using the 'accent' class to maintain design consistency.", "The chapter provides insights into addressing alignment issues by aligning text with checkboxes, showcasing the process of using the 'line' and 'flex' classes to adjust the alignment, achieving better design coherence and resolving the issue of compressed text.", "The speaker showcases the process of utilizing Tailwind CSS to align the checkbox with the text, demonstrating how to adjust the checkbox position by adding a 'margin-top' class, highlighting the ability to fine-tune elements for precise design alignment."]}, {'end': 13670.801, 'start': 13406.059, 'title': 'Creating custom select with tailwind css', 'summary': 'Discusses creating custom select options in tailwind css, including modifying the original html select element, creating a custom select component, and adding styling and functionality such as hover effects and transitions.', 'duration': 264.742, 'highlights': ['The chapter discusses creating custom select options in Tailwind CSS, including modifying the original HTML select element, creating a custom select component, and adding styling and functionality such as hover effects and transitions.', 'Demonstrates modifying the original HTML select element by applying classes to match the design of other inputs and adjusting padding, resulting in a visually consistent and functional select element.', 'Illustrates the process of creating a custom select component using div elements, applying classes for appearance and functionality, such as hover effects and transitions, to mimic the behavior of a standard select element.', 'Details the addition of a list of options to the custom select component, utilizing div elements and flex classes to create a dropdown-like functionality when clicking the selected option.']}, {'end': 14148.156, 'start': 13670.801, 'title': 'Custom select styling and functionality', 'summary': 'Discusses customizing the styling and functionality of a select element in next.js 13, including setting initial state, adding classes, applying styles, and creating a rotating arrow effect based on the open/closed state of the select.', 'duration': 477.355, 'highlights': ['Setting initial state and toggling open/closed state of the select using use state The speaker describes using use state to set the initial state of the select as closed and toggling the open/closed state when the select is clicked, demonstrating functionality in Next.js 13.', 'Applying padding and margin styles, creating a class for select children, and setting initial value The speaker demonstrates applying padding and margin styles, creating a class for select children, and setting an initial value for the select element, showcasing the use of CSS styling in the customization process.', 'Implementing hover effects and updating the selected value when an option is clicked The speaker showcases implementing hover effects using CSS and updating the selected value when an option is clicked, enhancing the user experience and demonstrating dynamic functionality of the custom select.', "Creating a rotating arrow effect based on the open/closed state of the select The speaker explains creating a rotating arrow effect using conditional classes based on the open/closed state of the select, enhancing the visual feedback for the user and incorporating dynamic styling based on the select's state."]}], 'duration': 1301.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao12846236.jpg', 'highlights': ['The speaker discusses creating custom select options in Tailwind CSS, including modifying the original HTML select element, creating a custom select component, and adding styling and functionality such as hover effects and transitions.', 'The chapter emphasizes the importance of maintaining design coherence across elements in the application, using the example of applying consistent design classes to input elements, showcasing how the same class is applied to input date and input text, ensuring uniformity (e.g., rounded edges, text color).', 'Setting initial state and toggling open/closed state of the select using use state The speaker describes using use state to set the initial state of the select as closed and toggling the open/closed state when the select is clicked, demonstrating functionality in Next.js 13.', 'The speaker adds a new background color for the disabled input, experimenting with different shades and settling on a background color of 100.']}, {'end': 15137.61, 'segs': [{'end': 14200.36, 'src': 'embed', 'start': 14172.661, 'weight': 0, 'content': [{'end': 14180.529, 'text': "Okay, it was short, it was quick, but it's enough to give some identity to your website thanks to Tailwind.", 'start': 14172.661, 'duration': 7.868}, {'end': 14185.554, 'text': 'So now you can use all these elements if you want to create your own application,', 'start': 14180.969, 'duration': 4.585}, {'end': 14190.659, 'text': 'and you can replicate all these elements to create an entire front-end application.', 'start': 14185.554, 'duration': 5.105}, {'end': 14200.36, 'text': 'One of the main core concepts of Tailwind CSS is utility classes.', 'start': 14195.876, 'duration': 4.484}], 'summary': 'Tailwind css provides quick identity to websites with utility classes.', 'duration': 27.699, 'max_score': 14172.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14172661.jpg'}, {'end': 14354.269, 'src': 'embed', 'start': 14316.435, 'weight': 2, 'content': [{'end': 14319.559, 'text': 'You can do it with responsive design at the same time,', 'start': 14316.435, 'duration': 3.124}, {'end': 14329.811, 'text': 'because Tailwind is providing to you breakpoint prefixes and those breakpoint prefixes are simply media queries.', 'start': 14319.559, 'duration': 10.252}, {'end': 14336.998, 'text': "here we see that we've got a width by default and we want to change this width by default.", 'start': 14329.811, 'duration': 7.187}, {'end': 14341.524, 'text': 'when we reach the breakpoint prefix medium, which is 768 pixel,', 'start': 14336.998, 'duration': 4.526}, {'end': 14354.269, 'text': 'I can just add the modifier MD on front of it and I will change the size when I will be on min width 768 pixels.', 'start': 14343.926, 'duration': 10.343}], 'summary': 'Tailwind provides breakpoint prefixes for responsive design, like md for 768 pixels.', 'duration': 37.834, 'max_score': 14316.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14316435.jpg'}, {'end': 14524.056, 'src': 'embed', 'start': 14461.191, 'weight': 1, 'content': [{'end': 14467.714, 'text': "but another topic where terrain css is amazing, it's its dark mode.", 'start': 14461.191, 'duration': 6.523}, {'end': 14473.195, 'text': 'With Tailwind CSS, you can add what we call the prefers color schema.', 'start': 14468.354, 'duration': 4.841}, {'end': 14482.918, 'text': 'You can add several different color schema to your Tailwind theme and you can use of course the dark mode.', 'start': 14473.855, 'duration': 9.063}, {'end': 14484.538, 'text': "Here we've got an example.", 'start': 14483.438, 'duration': 1.1}, {'end': 14491.18, 'text': 'we can say that in dark mode, I want to change a color background and I just add a dark on top of it.', 'start': 14484.538, 'duration': 6.642}, {'end': 14501.884, 'text': "okay?. And that's amazing, because Tailwind CSS really hacked this thing of having a dark mode into your application or website.", 'start': 14491.18, 'duration': 10.704}, {'end': 14504.505, 'text': 'Personally, I use it all the time.', 'start': 14502.364, 'duration': 2.141}, {'end': 14511.228, 'text': "However, the real force for me of Tailwind CSS, it's its customization system.", 'start': 14504.785, 'duration': 6.443}, {'end': 14518.112, 'text': 'With Tailwind CSS, you can customize all of it, all your framework.', 'start': 14512.368, 'duration': 5.744}, {'end': 14524.056, 'text': 'Actually, you can customize your team through a tailwind.config.js file.', 'start': 14518.312, 'duration': 5.744}], 'summary': 'Tailwind css offers amazing dark mode and extensive customization capabilities.', 'duration': 62.865, 'max_score': 14461.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14461191.jpg'}, {'end': 14707.902, 'src': 'embed', 'start': 14684.28, 'weight': 4, 'content': [{'end': 14690.886, 'text': 'so you can stack the base of Tailwind plus your custom element and your custom design.', 'start': 14684.28, 'duration': 6.606}, {'end': 14694.129, 'text': 'If you want to go deeper into the customization of Tailwind,', 'start': 14691.086, 'duration': 3.043}, {'end': 14707.441, 'text': 'you have also the option of writing plugins in JavaScript that will help you to basically change your base or change your component and utilities provided by Tailwind.', 'start': 14694.129, 'duration': 13.312}, {'end': 14707.902, 'text': 'All right.', 'start': 14707.641, 'duration': 0.261}], 'summary': 'Tailwind allows stacking custom elements and design with option for javascript plugins.', 'duration': 23.622, 'max_score': 14684.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14684280.jpg'}, {'end': 14776.941, 'src': 'embed', 'start': 14742.889, 'weight': 5, 'content': [{'end': 14746.754, 'text': 'and I need to add the key value dark mode class.', 'start': 14742.889, 'duration': 3.865}, {'end': 14748.416, 'text': 'By doing this,', 'start': 14747.575, 'duration': 0.841}, {'end': 14762.331, 'text': "I'm going to tell Tailwind actually to use the dark mode when I will add a class and this class will be actually the class dark and this class dark will be on the top level of my application.", 'start': 14748.416, 'duration': 13.915}, {'end': 14768.277, 'text': 'So when I go to my layout.tsx, this is where I want to put my class.', 'start': 14763.112, 'duration': 5.165}, {'end': 14776.941, 'text': "So here, what I'm going to do at first, I'm going to give a dark behavior to my application.", 'start': 14769.378, 'duration': 7.563}], 'summary': 'Add dark mode class to tell tailwind to use dark mode in application.', 'duration': 34.052, 'max_score': 14742.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14742889.jpg'}, {'end': 14906.267, 'src': 'embed', 'start': 14829.214, 'weight': 6, 'content': [{'end': 14830.615, 'text': 'We are on the light mode.', 'start': 14829.214, 'duration': 1.401}, {'end': 14840.701, 'text': 'Okay So what we need to do is to create actually somewhere a button to trigger light or dark mode.', 'start': 14831.035, 'duration': 9.666}, {'end': 14850.608, 'text': 'And this button actually will do what? It will add to our HTML first tag of our application, the class name dark.', 'start': 14841.422, 'duration': 9.186}, {'end': 14859.034, 'text': "All right, I've created a header component with a button, and this is the button that will trigger our dark mode.", 'start': 14851.689, 'duration': 7.345}, {'end': 14865.679, 'text': "So back in our application, in my component, actually, I've created three new files.", 'start': 14859.795, 'duration': 5.884}, {'end': 14870.263, 'text': 'Two files icon, which are basically the two icons that I will need.', 'start': 14866.64, 'duration': 3.623}, {'end': 14874.165, 'text': 'So when I will be on the light mode, I will have the moon icon.', 'start': 14870.723, 'duration': 3.442}, {'end': 14876.988, 'text': 'And when I will be on dark, I will have the sun.', 'start': 14874.646, 'duration': 2.342}, {'end': 14881.09, 'text': 'Then I have created this header component.', 'start': 14877.728, 'duration': 3.362}, {'end': 14888.215, 'text': "And let's take a look at it because this is a quick function that I created for you in order to trigger your dark mode.", 'start': 14881.27, 'duration': 6.945}, {'end': 14890.416, 'text': "So let's have an explication.", 'start': 14888.975, 'duration': 1.441}, {'end': 14892.458, 'text': 'Here I got the header.', 'start': 14891.077, 'duration': 1.381}, {'end': 14895.96, 'text': "Okay And when I click, I'm triggering a function.", 'start': 14892.638, 'duration': 3.322}, {'end': 14897.541, 'text': 'This function is called switch mode.', 'start': 14896, 'duration': 1.541}, {'end': 14901.764, 'text': 'And switch mode will switch actually the dark mode.', 'start': 14898.141, 'duration': 3.623}, {'end': 14906.267, 'text': 'So I have created a state which is a boolean on undefined by default.', 'start': 14902.544, 'duration': 3.723}], 'summary': 'Creating a button to toggle light and dark mode with icons, using a switch mode function.', 'duration': 77.053, 'max_score': 14829.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14829214.jpg'}], 'start': 14148.456, 'title': 'Tailwind css: design system & customization', 'summary': 'Covers creating a design system, customizing tailwind css, and implementing dark mode. it emphasizes utility classes, breakpoints, customizations, dark mode, and switch mode button functionality.', 'chapters': [{'end': 14374.956, 'start': 14148.456, 'title': 'Tailwind css: creating a design system', 'summary': 'Explains the process of creating a design system using tailwind css, emphasizing the use of utility classes, preexisting design systems, and responsive design with breakpoint prefixes, allowing for faster development and lighter code base.', 'duration': 226.5, 'highlights': ['Tailwind CSS allows for faster development and lighter code base through the use of utility classes, providing the same results without writing additional CSS. With Tailwind CSS, the use of utility classes enables faster development and a lighter code base by providing the same results without writing additional CSS, allowing for efficient styling and design implementation.', 'Tailwind CSS provides a predefined design system, allowing for immediate use without the need to create a design system from scratch. Tailwind CSS offers a predefined design system, enabling immediate use without the necessity of creating a design system from scratch, providing a convenient starting point for design implementation.', 'Tailwind CSS facilitates responsive design from the start, utilizing breakpoint prefixes for different screen sizes, streamlining the development process. Tailwind CSS streamlines the development process by enabling responsive design from the start, utilizing breakpoint prefixes for different screen sizes, thereby enhancing the efficiency of design implementation.']}, {'end': 14598.601, 'start': 14375.977, 'title': 'Tailwind css features and customization', 'summary': 'Discusses the various features of tailwind css, including its support for modifiers like hover, focus, and pseudo-elements, responsive breakpoints, dark mode, and its powerful customization system, allowing users to define their own themes and customize the framework through a tailwind.config.js file.', 'duration': 222.624, 'highlights': ['Customization System Tailwind CSS allows extensive customization through a tailwind.config.js file, enabling users to define their own themes, including colors, font family, and sizes, and dynamically creating related classes, revolutionizing the way styles are applied.', 'Modifiers and Pseudo-Elements Tailwind CSS supports modifiers like hover, focus, and pseudo-elements such as before and after, allowing for easy customization and behavior changes for various elements.', 'Responsive Breakpoints The responsive breakpoints in Tailwind CSS enable stacking of modifiers and utility classes, providing great flexibility in designing responsive layouts.', 'Dark Mode Support Tailwind CSS provides seamless support for dark mode using the prefers-color-scheme property, allowing easy implementation of different color schemes for dark mode.']}, {'end': 14829.154, 'start': 14598.601, 'title': 'Customizing tailwind css and implementing dark mode', 'summary': "Explores customizing tailwind css by reusing styles, creating custom utilities and classes, and writing plugins in javascript, along with implementing dark mode by adding a key value dark mode class to the tailwind.config.js file and applying the dark class to change the application's appearance.", 'duration': 230.553, 'highlights': ['You can customize Tailwind CSS by reusing styles, creating custom utilities and classes, and writing plugins in JavaScript. Tailwind CSS customization options include reusing styles, creating custom utilities and classes, and writing JavaScript plugins.', "Implementing dark mode involves adding a key value dark mode class to the tailwind.config.js file and applying the dark class to change the application's appearance. Implementing dark mode in Tailwind CSS requires adding a key value dark mode class and applying the dark class to change the application's appearance.", "Applying the dark class changes the application's appearance, such as the background color and text color, based on the modifier dark. Applying the dark class changes the application's appearance, including the background and text color, based on the modifier dark."]}, {'end': 15137.61, 'start': 14829.214, 'title': 'Implementing dark mode functionality', 'summary': 'Discusses the implementation of a button to switch between light and dark modes, including the use of local storage and useeffect to persist the chosen mode, and the functionality of the switch mode button.', 'duration': 308.396, 'highlights': ["The button will add the class name 'dark' to the HTML first tag of the application. The button triggers the addition of the 'dark' class to the application's HTML first tag.", 'The implementation includes two icons, the moon icon for light mode and the sun icon for dark mode. Two icon files are created for the moon and sun icons, representing light and dark modes respectively.', 'The switch mode function is created to toggle the dark mode by changing a boolean state and utilizing useEffect to update the document element class and store the mode in local storage. The switch mode function toggles the dark mode by changing a boolean state, utilizing useEffect to update the document element class, and storing the mode in local storage.']}], 'duration': 989.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ft30zcMlFao/pics/ft30zcMlFao14148456.jpg', 'highlights': ['Tailwind CSS streamlines development with utility classes and predefined design system.', 'Customize Tailwind CSS extensively through tailwind.config.js for themes and related classes.', 'Tailwind CSS supports modifiers, pseudo-elements, and responsive breakpoints for flexibility.', 'Seamless dark mode support in Tailwind CSS using prefers-color-scheme property.', 'Customize Tailwind CSS by reusing styles, creating custom utilities, and writing plugins.', 'Implement dark mode in Tailwind CSS by adding key value dark mode class and applying the dark class.', "Button triggers addition of 'dark' class to HTML first tag, representing dark mode.", 'Create moon and sun icons for light and dark modes respectively.', 'Toggle dark mode using switch mode function, updating document element class and storing mode in local storage.']}], 'highlights': ['Tailwind CSS provides pre-written CSS classes, enabling dynamic design updates and facilitating faster development without writing additional CSS.', 'The final goal is to create a custom design system and implement dark mode using Tailwind CSS. The course aims to guide learners in creating their own design system and implementing dark mode.', 'Tailwind CSS customization system allows for extensive customization through the tailwind.config.js file, enabling the creation of custom themes with specific colors and dynamic generation of related styles.', 'Tailwind CSS resets default styling of HTML tags and provides flexibility to customize font sizes using classes like text-xs, text-small, text-base, text-lg, text-xl, and even creating custom sizes like 9xl and 2xl, resulting in a wide range of font sizes from 12 pixels to 100 pixels.', 'Tailwind CSS allows manipulation of text decoration thickness and offset using classes like decoration 8 and underline offset 8, impacting the appearance and spacing of underlines.', 'Tailwind CSS provides classes for adjusting spacing and sizing between elements, demonstrated through examples of margin and padding adjustments.', 'Demonstrates using flex property to align elements in a row and explains how to use flex to organize elements in a row or column.', 'Tailwind CSS provides classes for blur, brightness, contrast, grayscale, drop shadow, hue-rotate, invert, saturate, and sepia filters.', 'Tailwind CSS provides pre-defined classes, such as transition, which can be used to create smooth animations, eliminating the need to write custom CSS classes.', 'The use of transition class significantly improves the user experience by making the color change smoother.', 'The speaker discusses creating custom select options in Tailwind CSS, including modifying the original HTML select element, creating a custom select component, and adding styling and functionality such as hover effects and transitions.', 'Tailwind CSS streamlines development with utility classes and predefined design system.', 'Seamless dark mode support in Tailwind CSS using prefers-color-scheme property.', 'Toggle dark mode using switch mode function, updating document element class and storing mode in local storage.']}