Tailwind CSS

Tailwind is a CSS utility framework which makes designing web sites easier. We can just use the pre-defined set of utility classes and even configure custom styles. Let's see how we can get started with tailwind

Getting started

Include the tailwind CDN link in the head of the HTML document, That's about it!.

<script src="https://cdn.tailwindcss.com"></script>

Add styles to your document

<h1 class="text-xl text-center">
    Hello world!
</h1>

Adding custom styles

However, you can still use the <style> tag or even an external CSS file to add your custom styles it is not recommended to do so.
Instead, we can make use of the tailwind.config to add our styles. Let's see how we can do that.

Start by adding a <script> tag in the head of the document and Initialize tailwind.config as shown.

<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "matte-black": '#28282B',
          }
        }
      }
    }
</script>

Use the color defined on an element.

<div class="bg-matte-black w-[250px] h-[250px]">
    <h1 class="text-white">Matte black on white</h1>  
</div>

Quick look on Media queries

Tailwind utility classes are by default for mobile layout. To change layout styles in Tab, desktop and wider layouts we can use break points like md, lg, xl and so on.

One caveat of tailwind is that, if you want to change multiple styles on a break point, we have to prefix the breakpoint tag for each style.

For example, To change padding and margin on medium layout,

 <div class="p-4 m-4 md:p-6 md:m-6">
    //code
</div>

Conclusion

This was my learning in a week of learning and building projects using tailwind. You can check the projects Paytm clone, RODE clone and Shopify clone. Thanks for reading!

Kavya's blog