Tailwind CSS v4 Crash Course – Build from Scratch!

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)

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

• Spacing (margin, padding, borders)

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

• Colors

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

• Width and Height

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

Containers/Animation

• Flex and Grids

  <div class="flex justify-between items-center">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
  </div>
  
  <div class="grid grid-cols-3 gap-4">
    <div>Grid item 1</div>
    <div>Grid item 2</div>
    <div>Grid item 3</div>
  </div>
  

• Containers

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

• Transitions and Animations

  <button class="transition-all duration-300 transform hover:scale-110">
    Hover to scale
  </button>
  

• Effects and Filters

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

Advanced Features

• Hover, Focus, Before, After…

  <button class="hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
    Interactive button
  </button>
  

• Responsive Design – media queries

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

• Dark Mode

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

• @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

  <div class="aspect-w-16 aspect-h-9">
    <iframe src="video-url" class="w-full h-full"></iframe>
  </div>
  

• Tailwind v4 features

  • https://tailwindcss.com/blog/tailwindcss-v4#container-queries

Practice

• Payment form https://dribbble.com/shots/23941276-Wallet-Page-Interactions

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.