Tailwind CSS v4 Tutorial with Responsive Design

steps

1. Use the Tailwind CSS Playground: Navigate to the Tailwind CSS Playground for instant experimentation without installation.

2. Install Tailwind CSS Locally: If working locally, ensure Node.js is installed and run the following:

   bashCopy

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init

3. Configure Tailwind: Use CSS-first configuration in the tailwind.config.cjs file:

   cssCopy

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   @layer components {
       .btn {
           @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
           &:hover {
               @apply bg-blue-700;
           }
       }
   }

4. Compile Your Tailwind CSS: Compile the updated Tailwind configuration in development mode:

   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

5. Apply Basic Utility Classes:
   • Add a class to an HTML element:
     htmlCopy

     <h1 class="text-center bg-blue-400">Hello, Tailwind CSS!</h1>

   • Observe the utility-first behavior for spacing, typography, and colors.

steps

1. Apply Utility Classes: Use breakpoint prefixes such as md:block and lg:hidden for responsive styling:

   htmlCopy

   <div class="hidden md:block lg:text-lg">Responsive Text Example</div>

2. Custom Breakpoints: Define unique breakpoints in your CSS configuration:

   cssCopy

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @custom-media --large (min-width: 1024px);

3. Test Responsiveness: Open the project in a browser, resize the window, and confirm elements adjust as intended.

steps

1. Add Custom Themes: Customize colors directly in your CSS using the @layer directive:

   cssCopy

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @layer utilities {
       .bg-custom {
           background-color: #ff9800;
       }
   }

2. Use the @apply Directive: Create reusable utility-based classes:

   cssCopy

   @layer components {
       .btn-primary {
           @apply bg-blue-500 text-white hover:bg-blue-700 rounded py-2 px-4;
       }
   }

3. Enable Dark Mode: Add dark mode styles by prefixing utilities with dark::

   cssCopy

   .card {
       @apply bg-white text-black;
       @apply dark:bg-gray-800 dark:text-white;
   }

   To toggle manually: Use a <button> with JavaScript to switch between dark and light modes. Add the dark class to the html element on toggle.