Tailwind CSS is one of the most <a href="https://css-supertools.com/" target="_blank" rel="noreferrer noopener">CSS</a> frameworks to Rapidly build modern websites without ever leaving your HTML. for me, my first job on Upwork was about editing the style of a website using Tailwind CSS so I think learning tailwind CSS will help you to improve your front-end technical skills to get jobs more fastly.



<h3>what is tailwind CSS </h3>



Tailwind CSS is a CSS framework that enables you to design your site by writing classes inside HTML elements without having to create a CSS file.



For example : 



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1024x214.png" alt="learn tailwind css : flex" class="wp-image-47" width="530" height="110" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1024x214.png 1024w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-300x63.png 300w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-768x161.png 768w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19.png 1108w" sizes="(max-width: 530px) 100vw, 530px" /></figure>







<h3>Learn tailwind CSS: Installation</h3>



There are many ways to install tailwind CSS in your project and they differ slightly depending on the type of project and the technologies used in it.



So all you have to do is visit:



<a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noreferrer noopener">https://tailwindcss.com/docs/installation</a>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/installatailwindcss.jpg" alt="learn tailwind css : installation" class="wp-image-48" width="456" height="248" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/installatailwindcss.jpg 600w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/installatailwindcss-300x164.jpg 300w" sizes="(max-width: 456px) 100vw, 456px" /></figure>



<a href="https://tailwindcss.com/docs/installation
"> </a>You will find all the ways in detail and with a simple explanation.



<h3>Most important: how to use it</h3>



Simplify, Each CSS property is expressed with a classname describe it



For example 1 : 



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/taiwlind2.png" alt="flex classname" class="wp-image-49" width="350" height="131"/></figure>



instead of :



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-18.png" alt="flex display" class="wp-image-50" width="350" height="181"/></figure>



here we switch the CSS property : display: flex; to classname flex



<hr class="wp-block-separator has-alpha-channel-opacity"/>



For example 2 :



<figure class="wp-block-image size-full is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-23.png" alt="learn tailwind css : background" class="wp-image-51" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-23.png 920w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-23-300x76.png 300w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-23-768x194.png 768w" sizes="(max-width: 920px) 100vw, 920px" /></figure>



instead of :



<figure class="wp-block-image size-full is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-22.png" alt="background css proprety" class="wp-image-52" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-22.png 696w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-22-300x155.png 300w" sizes="(max-width: 696px) 100vw, 696px" /></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



For example 3 :



<figure class="wp-block-image size-large is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1-1024x214.png" alt="flex display" class="wp-image-53" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1-1024x214.png 1024w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1-300x63.png 300w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1-768x161.png 768w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-19-1.png 1108w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



instead of :



<figure class="wp-block-image size-full is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-20.png" alt="display flex" class="wp-image-54" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-20.png 660w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-20-300x164.png 300w" sizes="(max-width: 660px) 100vw, 660px" /></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



For example 4 :



<figure class="wp-block-image size-large is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-24-1-1024x181.png" alt="learn tailwind css : font size" class="wp-image-55" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-24-1-1024x181.png 1024w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-24-1-300x53.png 300w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-24-1-768x136.png 768w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-24-1.png 1312w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



instead of :



<figure class="wp-block-image size-full is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-25.png" alt="" class="wp-image-56" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-25.png 790w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-25-300x153.png 300w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/carbon-25-768x391.png 768w" sizes="(max-width: 790px) 100vw, 790px" /></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



those were 4 examples to explain how tailwind CSS works



<h3>Do I need to memorize the name of all the classes?</h3>



Never, even the pros won&#8217;t memorize all the classes.



<h3>And how will I know the class name for a specific feature?</h3>



Whenever you need a class name for a specific property just visit: <a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noreferrer noopener">Tailwind CSS Docs</a>, And write in the search the name of the property and the name of the class will appear directly with you, with explanations and examples.



<figure class="wp-block-image size-full is-resized"><img src="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/Frame-10.jpg" alt="tailwind css serach " class="wp-image-57" width="350" srcset="https://admin.souhaybkamal.com/wp-content/uploads/2022/10/Frame-10.jpg 400w, https://admin.souhaybkamal.com/wp-content/uploads/2022/10/Frame-10-300x218.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></figure>



<h3>Practicing tailwind CSS</h3>



Now to practice using it, open a project you designed using CSS and rebuild it using tailwind CSS



<h3>Conclusion</h3>



Tailwind CSS for me was one of the easiest techniques I learned, yet it added to my speed in work and greater ability to receive new projects.



Start learning Tailwind CSS today and you will thank me again in the near future

Learn tailwind CSS in one post ( easy to learn )

built with love bysouhayb kamal