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) Large blue bold text Spacing (margin, padding, borders) Element with margin, padding and border Colors Red background with white text Width and Height Responsive width and fixed height Containers/Animation Flex and Grids Flex item 1 Flex item 2 Grid item 1 Grid item 2 Grid item 3 Containers Centered container with padding Transitions and Animations Hover to scale Effects and Filters Advanced Features Hover, Focus, Before, After... Interactive button Responsive Design - media queries Responsive text size Dark Mode 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 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.

Apr 25, 2025 - 00:03

In this post we will look at:

and much more...

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

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

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

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

Effects and Filters

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

Hover, Focus, Before, After...

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

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">
   src="video-url" class="w-full h-full">

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

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

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