In this post we will look at:

  • Typography/Styling
  • Animation/Filters
  • Advanced Features
  • Pro Features
  • Tailwind v4 features
  • Practice

and much more...

We'll cover practice examples and advanced features at the end, so stay tuned!

Styling/Typography

  • Font (size, color, weight)

     class="text-lg text-blue-500 font-bold">
  Large blue bold text

  • Spacing (margin, padding, borders)

     class="m-4 p-2 border-2 border-gray-300">
  Element with margin, padding and border

  • Colors

     class="bg-red-500 text-white hover:bg-red-600">
  Red background with white text

  • Width and Height

     class="w-full h-32 md:w-1/2">
  Responsive width and fixed height

Containers/Animation

  • Flex and Grids

     class="flex justify-between items-center">
  
    Flex item 1
    
  
    Flex item 2
    

    


     class="grid grid-cols-3 gap-4">
  
    Grid item 1
    
  
    Grid item 2
    
  
    Grid item 3

  • Containers

     class="container mx-auto px-4">
  Centered container with padding

  • Transitions and Animations

  • Effects and Filters

     class="blur-sm hover:blur-none transition-all" src="image.jpg" alt="Blurred image">

Advanced Features

  • Hover, Focus, Before, After...

  • Responsive Design - media queries

     class="text-sm md:text-base lg:text-lg">
  Responsive text size

  • Dark Mode

     class="dark:bg-gray-800 dark:text-white">
  Dark mode compatible element

  • @apply and module.scss

    .custom-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}

  • Tailwind Config

    module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1234ff'
      }
    }
  }
}

  • Custom Utilities

    // tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem'
      }
    }
  }
}

  • iframe and video

     class="aspect-w-16 aspect-h-9">

  • Tailwind v4 features

Practice

Check full video where I done this project - https://www.youtube.com/watch?v=D9kRwAeQAYs

Conclusion

An awesome tool for quickly building pet projects and gaining practical experience.