Tailwind CSS 101

This guide will help you get started with Tailwind CSS, covering the basics to get you up and running quickly.

What is TailwindCSS?

Tailwind CSS is a tool that lets you style your web pages by using pre-existing classes directly in your HTML. It helps you quickly create custom designs while writing less CSS.

<div className="max-w-xs rounded overflow-hidden shadow-lg bg-white p-4">
  <img className="w-full" src="https://via.placeholder.com/300x200" alt="Product image" />
  <div className="mt-4">
    <h2 className="text-lg font-bold">Product Name</h2>
    <p className="text-gray-700">$19.99</p>
  </div>
  <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Add to Cart</button>
</div>
Product image

Product Name

$19.99

Using these predefined classes is why Tailwind CSS is known as a utility-first framework.

Why Is Everyone Using It?

People use Tailwind CSS for its performance. It simplifies class naming and removes unused CSS, making your site faster and lighter for visitors.

0%

How to start using TailwindCSS

  1. First, install Tailwind CSS & create the Tailwind configuration file:

    npm install -D tailwindcss
npx tailwindcss init

  2. In the tailwind.config.js file, replace the content with this:

    module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  3. Add Tailwind's directives to your global CSS file:

    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. Now you can start using Tailwind CSS in your HTML:

    <div className="max-w-xs rounded overflow-hidden shadow-lg bg-white p-4">
  <img
    className="w-full"
    src="https://via.placeholder.com/300x200"
    alt="Product image"
  />
  <div className="mt-4">
    <h2 className="text-lg font-bold">Product Name</h2>
    <p className="text-gray-700">$19.99</p>
  </div>
  <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">
    Add to Cart
  </button>
</div>

Let's See Tailwind Magic in Action

Now that you understand what TailwindCSS is and why it's popular, let's dive into seeing it in action with some practical examples.

Utility Jacket

$110.00
In stock

Free shipping on all continental US orders.

1. Create the Card Container

Start with an outer container for the card. This container has a white background, rounded corners, and a shadow.

<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  <!-- Content goes here -->
</div>

Explanation:

  • flex: Arranges items in a row.
  • font-sans: Uses a clean sans-serif font.
  • bg-white: Sets the background to white.
  • shadow-2xl: Adds a shadow for depth.
  • mt-16: Adds space at the top.
  • mx-auto: Centers the card.
  • max-w-xl: Limits the width of the card.
  • overflow-hidden: Keeps content inside the container.
  • rounded-2xl: Rounds the corners.

2. Add an Image

Now, let's add an image. The image will fill its container.

<div className="flex-none w-48 relative">
  <img
    src="/tailwind1.jpg"
    alt="Product"
    className="absolute inset-0 w-full h-full object-cover"
    loading="lazy"
  />
</div>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>
</div>

Explanation:

  • flex-none: Keeps the image container from stretching.
  • w-48: Sets the width of the image container.
  • relative: Positions the image relative to its container.
  • absolute inset-0: Makes the image cover the entire container.
  • w-full h-full: Fills the container with the image.
  • object-cover: Ensures the image covers the container without distortion.

3. Add the Form Section

Add a section for product details, size options, and buttons.

<form className="flex-auto p-6">
  <!-- Form content -->
</form>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>
{/*Add the form  */}
  <form className="flex-auto p-6">
  <!-- Form content -->
</form>

</div>

Explanation:

  • flex-auto: Expands the form to fill available space.
  • p-6: Adds padding inside the form.

4. Add Product Details

Include the product title, price, and stock status.

<div className="flex flex-wrap">
  <h1 className="flex-auto text-lg font-semibold text-slate-900">
    Utility Jacket
  </h1>
  <div className="text-lg font-semibold text-slate-500">$110.00</div>
  <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
    In stock
  </div>
</div>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>

  {/*Add the form  */}
  <form className="flex-auto p-6">
    {/*Add product title, price, and stock  */}
    <div className="flex flex-wrap">
      <h1 className="flex-auto text-lg font-semibold text-slate-900">
        Utility Jacket
      </h1>
      <div className="text-lg font-semibold text-slate-500">$110.00</div>
      <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>
  </form>
</div>

Explanation:

  • flex flex-wrap: Wraps items to the next line if needed.
  • flex-auto: Stretches the title to take up available space.
  • text-lg font-semibold text-slate-900: Styles the title with a large, bold font and dark color.
  • text-slate-500: Sets the price color to a lighter gray.
  • w-full flex-none text-sm font-medium text-slate-700 mt-2: Styles the stock status with a small font and medium gray color.

5. Add Size Options

Create radio buttons for selecting the product size.

<div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
  <div className="space-x-2 flex text-sm">
    <label>
      <input className="sr-only peer" name="size" type="radio" value="xs" checked />
      <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
        XS
      </div>
    </label>
    <!-- Add more sizes -->
  </div>
</div>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>

  {/*Add the form  */}
  <form className="flex-auto p-6">
      {/*Add product title, price, and stock  */}
    <div className="flex flex-wrap">
      <h1 className="flex-auto text-lg font-semibold text-slate-900">
        Utility Jacket
      </h1>
      <div className="text-lg font-semibold text-slate-500">$110.00</div>
      <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>


    <div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
  <div className="space-x-2 flex text-sm">
    <label>
      <input className="sr-only peer" name="size" type="radio" value="xs" checked />
      <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
        XS
      </div>
    </label>
    <!-- Add more sizes -->
  </div>
</div>

  </form>
</div>

Explanation:

  • flex items-baseline: Aligns items along the baseline.
  • mt-4 mb-6 pb-6 border-b border-slate-200: Adds space and a bottom border.
  • space-x-2 flex text-sm: Creates space between size options.
  • sr-only: Hides the radio inputs visually.
  • peer: Applies styles to sibling elements based on input state.
  • peer-checked: Styles the selected size option with bold text, dark background, and white text.

6. Add Action Buttons

Add buttons for purchasing the product or adding it to the cart.

<div className="flex space-x-4 mb-6 text-sm font-medium">
  <div className="flex-auto flex space-x-4">
    <button
      className="h-10 px-6 font-semibold rounded-md bg-black text-white"
      type="submit"
    >
      Buy now
    </button>
    <button
      className="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900"
      type="button"
    >
      Add to bag
    </button>
  </div>
  <button
    className="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200"
    type="button"
    aria-label="Like"
  >
    <svg width="20" height="20" fill="currentColor" aria-hidden="true">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
      />
    </svg>
  </button>
</div>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>

  {/*Add the form  */}
  <form className="flex-auto p-6">
      {/*Add product title, price, and stock  */}
    <div className="flex flex-wrap">
      <h1 className="flex-auto text-lg font-semibold text-slate-900">
        Utility Jacket
      </h1>
      <div className="text-lg font-semibold text-slate-500">$110.00</div>
      <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>


    <div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
  <div className="space-x-2 flex text-sm">
    <label>
      <input className="sr-only peer" name="size" type="radio" value="xs" checked />
      <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
        XS
      </div>
    </label>
    <!-- Add more sizes -->
  </div>
</div>

<div className="flex space-x-4 mb-6 text-sm font-medium">
  <div className="flex-auto flex space-x-4">
    <button
      className="h-10 px-6 font-semibold rounded-md bg-black text-white"
      type="submit"
    >
      Buy now
    </button>
    <button
      className="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900"
      type="button"
    >
      Add to bag
    </button>
  </div>
  <button
    className="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200"
    type="button"
    aria-label="Like"
  >
    <svg width="20" height="20" fill="currentColor" aria-hidden="true">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
      />
    </svg>
  </button>
</div>
  </form>
</div>

Explanation:

  • flex space-x-4 mb-6 text-sm font-medium: Aligns buttons in a row with space between them.
  • h-10 px-6 font-semibold rounded-md bg-black text-white: Styles the "Buy now" button with padding, bold font, black background, and white text.
  • border border-slate-200 text-slate-900: Adds a border to the "Add to bag" button.
  • flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200: Styles the "Like" button with a fixed size and centered content.

7. Add Footer Text

Include a footer with additional information.

<p className="text-sm text-slate-700">
  Free shipping on all continental US orders.
</p>
<div className="flex font-sans bg-white shadow-2xl mt-16 mx-auto max-w-xl overflow-hidden rounded-2xl">
  {/*Add the image code to the container */}
  <div className="flex-none w-48 relative">
    <img
      src="/yourimage-path.png"
      alt="Product"
      className="absolute inset-0 w-full h-full object-cover"
      loading="lazy"
    />
  </div>

  {/*Add the form  */}
  <form className="flex-auto p-6">
      {/*Add product title, price, and stock  */}
    <div className="flex flex-wrap">
      <h1 className="flex-auto text-lg font-semibold text-slate-900">
        Utility Jacket
      </h1>
      <div className="text-lg font-semibold text-slate-500">$110.00</div>
      <div className="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>


    <div className="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
  <div className="space-x-2 flex text-sm">
    <label>
      <input className="sr-only peer" name="size" type="radio" value="xs" checked />
      <div className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
        XS
      </div>
    </label>
    <!-- Add more sizes -->
  </div>
</div>

<div className="flex space-x-4 mb-6 text-sm font-medium">
  <div className="flex-auto flex space-x-4">
    <button
      className="h-10 px-6 font-semibold rounded-md bg-black text-white"
      type="submit"
    >
      Buy now
    </button>
    <button
      className="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900"
      type="button"
    >
      Add to bag
    </button>
  </div>
  <button
    className="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200"
    type="button"
    aria-label="Like"
  >
    <svg width="20" height="20" fill="currentColor" aria-hidden="true">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
      />
    </svg>
  </button>
</div>
<p className="text-sm text-slate-700">
  Free shipping on all continental US orders.
</p>
  </form>
</div>

Explanation:

  • text-sm text-slate-700: Styles the footer text with a small font and medium gray color.

That's it! You've built a simple, customizable card component with Tailwind CSS.

Understanding Tailwind Responsive

Tailwind CSS is designed with a mobile-first approach. This means that the default styles are for mobile devices. As the screen size increases, Tailwind allows you to add styles to make the content look good on bigger screens.

How Mobile-First Works

In Tailwind CSS, classes are applied to elements for mobile screens by default. You can then add responsive modifiers to change these styles for larger screens.

  • sm: applies styles on small screens (640px and up).
  • md: applies styles on medium screens (768px and up).
  • lg: applies styles on large screens (1024px and up).
  • xl: applies styles on extra-large screens (1280px and up). These classes allow you to create layouts that adapt to different screen sizes.

Mobile-First Layout

Let's start with a simple layout that works well on a phone:

<div className="bg-gray-200 p-4">
  <h1 className="text-xl font-bold">Welcome!</h1>
  <p className="text-base">This is designed for mobile screens first.</p>
</div>

Note: On mobile devices, you won't see the difference because of the screen size. Use a laptop or desktop.

Welcome!

This is designed for mobile screens first.

Tablet Layout

Now, let's see how we can adjust this layout for tablets using the md: modifier:

<div className="bg-gray-200 p-4 md:p-8">
  <h1 className="text-xl md:text-5xl font-bold">Welcome!</h1>
  <p className="text-base md:text-lg">This layout now adapts to tablets.</p>
</div>

Welcome!

This layout now adapts to tablets.

Laptop Layout

Finally, let's adjust the layout for laptops using the lg: modifier:

<div className="bg-gray-200 p-4 md:p-8 lg:p-12">
  <h1 className="text-xl md:text-5xl lg:text-9xl font-bold">Welcome!</h1>
  <p className="text-base md:text-lg lg:text-xl">This layout now adapts to laptops.</p>
</div>

Welcome!

This layout now adapts to laptops.

Note: On mobile devices, you won't see the difference because of the screen size. Use a laptop or desktop.

When using Tailwind CSS, it's essential to start designing for the smallest screens first and then gradually enhancing the layout for larger devices like tablets and laptops.

Adding Custom Styles to Tailwind CSS

Tailwind CSS is highly customizable. You can easily add custom styles to your tailwind.config.js file to extend the default Tailwind configuration. Below are some examples of how to add custom colors, sizes, shadows, gradients, and even complex CSS.

1. Custom Colors

To add custom colors, you can extend the colors object in the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e3a8a',
        'custom-green': '#10b981',
      },
    },
  },
}

2. Custom Sizes

Adding custom sizes for spacing, width, or height is simple. Extend the spacing object:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

3. Custom Shadows

To add custom shadows, extend the boxShadow object:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom-light': '0 2px 4px rgba(0, 0, 0, 0.1)',
        'custom-heavy': '0 10px 15px rgba(0, 0, 0, 0.5)',
      },
    },
  },
}

4. Custom Gradients

You can add custom gradients by extending the backgroundImage object:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'custom-gradient': 'linear-gradient(to right, #6b7280, #1e3a8a)',
      },
    },
  },
}

5. Complex Custom CSS

If you need to add more complex custom CSS, you can do so in the extend section:

module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            'h1': {
              color: theme('colors.red.500'),
              fontWeight: '700',
            },
            'p': {
              marginBottom: theme('spacing.4'),
            },
          },
        },
      }),
    },
  },
}

For More Information

For more detailed information on how to customize Tailwind CSS, visit the official Tailwind CSS documentation.

Best Practices and Recommendations for Tailwind CSS

Tailwind CSS offers a flexible and powerful way to build responsive designs, but like any tool, there are best practices and recommendations that can help you get the most out of it. These suggestions are not definitive, but they can guide you on your development journey.

1. Start with a Mobile-First Approach

Tailwind CSS is designed to work best when you start with a mobile-first approach. This means designing for the smallest screens first and progressively enhancing your design for larger screens.

Why?

  • Ensures your design is accessible to all users, regardless of device.
  • Simplifies your workflow by starting with the most basic layout and building up.

2. Keep Your Tailwind Config Organized

As you add custom styles to your tailwind.config.js file, it can grow quickly. Keeping this file organized will help you maintain control over your styles.

Tips:

  • Group related styles together (e.g., all color customizations in one section).
  • Comment your code to explain any complex customizations.

3. Don’t Overextend the Framework

While Tailwind is powerful, it’s not meant to replace all CSS.

When to Write Custom CSS:

  • For complex animations or interactions that Tailwind doesn't natively support.
  • When you have highly specific styles that don’t need to be reused.

4. Experiment and Iterate

Tailwind CSS is flexible, and there's no one-size-fits-all solution. Don’t be afraid to experiment with different approaches and iterate on your design.

Advice:

  • Regularly review your code to see if there are ways to simplify or improve it.
  • Stay updated with the latest Tailwind releases and best practices shared by the community.

Conclusion

These best practices and recommendations are not strict rules but guidelines to help you on your Tailwind CSS journey. Tailwind's flexibility is one of its greatest strengths, so feel free to adapt these suggestions to fit your specific needs and workflow. For more information, always refer to the official Tailwind CSS documentation.

Happy coding!

logo

All Pages

Home
Landing Pages
Dashboards
Projects

Social

YoutubeYoutube
InstagramInstagram
TwitterTwitter
TiktokTiktok

Subscribe to our Newsletter

To receive news, updates, code challenges, tech trends

LicensesPrivacy PolicyTerm of Services

© 2024 Codding Nutella. All rights reserved.