Technology Demo - Tailwind CSS

Introduction

Tailwind CSS is a popular CSS framework that provides a set of pre-designed classes to help you style your web pages quickly and efficiently. With Tailwind CSS, you can easily apply styles to your HTML elements by adding pre-defined classes to them. This utility-first approach allows you to create complex layouts and designs with minimal effort. In this demo, I will show you how to use Tailwind CSS to style a web page and demonstrate some of its key features.

I am using the Tailwind CSS documentation as the "demo" I am following. Their documentation is very clear and easy to follow, allowing anyone who understands HTML and CSS to start creating with it. Tailwind CSS was released in 2017.

Getting Started

To get Tailwind set up on your web project, navigate to the Tailwind CSS installation documentation and follow the steps there. It is also helpful to install the "Tailwind CSS Intellisense" VS Code extension to autocomplete class names and see all of the available options as you type them.

Margin and Padding

Changing the margin and padding is easy with Tailwind CSS. To change the margin, apply the class name m followed by one of the following:

                    
<p class="m-0">This paragraph has an margin 0px all around</p>
<p class="mx-auto">This paragraph has an margin of auto on the left and right (x-axis)</p>
<p class="my-auto">This paragraph has an margin of auto on the top and bottom (y-axis)</p>
<p class="mt-0.5">This paragraph has an margin of 0.125rem on the top</p>
<p class="mr-1">This paragraph has an margin of 0.25rem on the right</p>
<p class="ml-1.5">This paragraph has an margin of 0.375rem on the left</p>
<p class="mb-2">This paragraph has an margin of 0.5rem on the bottom</p>
                    
                

As you can see, changing the values after m each apply a different margin:

• x-: applies to x-axis
• y-: applies to x-axis
• t-: applies to top
• r-: applies to right
• l-: applies to left
• b-: applies to bottom
• -auto: applies auto margin
• -0.5: applies margin in intervals of .125rem

Changing padding values is the same, except we use a p instead of an m.

Changing Font Size/Weight

Changing text sizes is also easy. Tailwind CSS includes a set of several pre-determined font sizes to choose from.

                    
<p class="text-xs">This paragraph has a font size of .75rem</p>
<p class="text-sm">This paragraph has a font size of .875rem</p>
<p class="text-base">This paragraph has a font size of 1rem</p>
<p class="text-lg">This paragraph has a font size of 1.125rem</p>
<p class="text-xl">This paragraph has a font size of 1.25rem</p>
<p class="text-2xl">This paragraph has a font size of 1.375rem</p>
<p class="text-3xl">This paragraph has an font size of 1.5rem</p>
                    
                

Colors

Tailwind CSS comes with a variety of colors out-of-the-box which can be found on this page of their documentation. However, you can add your own if you choose. To change the color of text, use the class text- followed by the color you would like to use.

                    
<p class="text-green-800">This paragraph has the predetermined color green-800</p>
<p class="text-[#5eead4]">This paragraph has the custom color #5eead4</p>
                    
                

Changing text color with Tailwind CSS

Changing background colors is very similar. On any element, use the class bg- followed by the color you would like to use.

                    
<p class="bg-green-800">This paragraph has the predetermined background color green-800</p>
<p class="bg-[#5eead4]">This paragraph has the custom background color #5eead4</p>
                    
                

Changing text color with Tailwind CSS

                        
<div class="my-5 p-5 rounded-lg border border-slate-200 bg-slate-50 dark:border-slate-900 dark:bg-slate-800 flex flex-row">
    <svg class="mt-1.5 mr-1.5 w-10 dark:fill-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
    </svg>
    <div>
        <h2 class="text-3xl font-semibold dark:text-white">Something insteresting you can do...</h2>
        <p class="py-2 dark:text-white">
            If you use the class <code class="text-slate-500 dark:text-slate-300">dark:</code> followed by a property, that property will be applied if the client is using dark mode on their device. Try enabling dark mode on your device and you will see this box will change colors.
        </p>
    </div>
</div>
                        
                    

Conclusion

As you can see, Tailwind offers a plethora of classes to help you style your website—and I've hardly even scratched the surface. Throughout creating this demo, I learned a great deal about the value of using a CSS framework like Tailwind CSS. It allows you to style web pages quickly and efficiently without having to worry about a complex stylesheet. With its comprehensive set of classes, Tailwind CSS can help you create complex layouts and designs with minimal effort. To view the full Tailwind CSS documentation, click here.