Tailwind CSS - Core Concepts

Previous
Quiz
Next

Tailwind CSS Core Concepts covers a wide range of fundamental topics, such as utility classes, custom configuration, and more.

Tailwind CSS Core Concepts Reference

Below topics cover how to apply core concepts like utility classes, custom configuration, and more.

Topic Description Example
Tailwind CSS - Utility-First Fundamentals Utility-First Fundamentals explain how to use utility classes to build and style your designs
Tailwind CSS - Hover, Focus, and Other States Hover, focus, and other states show how to apply styles for different interaction states of elements.
Tailwind CSS - Responsive Design Responsive design ensures your site looks good on all screen sizes.
Tailwind CSS - Dark Mode Dark mode changes your site's colors for easier viewing in low light.
Tailwind CSS - Reusing Styles Reusing styles helps you apply the same design across multiple elements.
Tailwind CSS - Adding Custom Styles Adding custom styles lets you create unique designs beyond the default options.
Tailwind CSS - Functions & Directives Functions & directives add extra functionality and control to your styles.

Example of Tailwind CSS

In the following example, we use Tailwind CSS core concepts classes to style different elements such as cards, buttons, and responsive layouts.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
  <!-- Utility-First Fundamentals -->
  <section class="mb-6">
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Utility-First Fundamentals
    </h1>
    <div class="bg-white p-2 rounded shadow">
      <h2 class="text-lg font-semibold mb-1">Card</h2>
      <p class="text-gray-700">
          Uses utility classes for padding, background, and shadow.
      </p>
    </div>
  </section>

  <!-- Hover, Focus, and Other States -->
  <section class="mb-6">
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Hover & Focus States
    </h1>
    <button class="bg-green-500 text-white py-1 px-3 rounded 
        hover:bg-green-700 hover:ring focus:outline-none 
        focus:ring-2 hover:ring-green-500">
        Hover & Focus
    </button>
    <p class="mt-2 text-gray-600">
        Button changes color on hover and shows a focus ring.
    </p>
  </section>

  <!-- Responsive Design -->
  <section>
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Responsive Design
    </h1>
    <div class="grid grid-cols-1 md:grid-cols-2 
            lg:grid-cols-3 gap-4">
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 1</h2>
        <p class="text-gray-600">
            Adjusts layout based on screen size.
        </p>
      </div>
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 2</h2>
        <p class="text-gray-600">
            Switches columns on larger screens.
        </p>
      </div>
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 3</h2>
        <p class="text-gray-600">
            Looks good on any device.
        </p>
      </div>
    </div>
  </section>
</body>

</html>

Example

In this example, we show how Tailwind CSS core concepts are applied to features such as dark mode, consistent styling with reusable components, and the addition of custom styles.

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-4">
    <h1 class="font-bold text-2xl mb-4">
        Tailwind CSS Core Concept Examples
    </h1>
  <!-- Dark Mode -->
    <section class="mb-6">
        <h1 class="text-xl font-bold text-blue-700 mb-2">
            Dark Mode
        </h1>
        <!-- Toggle dark mode with a button -->
        <button class="bg-gray-800 text-white py-2 px-4 
            rounded shadow-md dark:bg-gray-900 
            dark:text-gray-200">
              Dark Mode Button
        </button>
        <p class="mt-2 text-gray-600 dark:text-gray-400">
            This button adapts to dark mode settings.
        </p>
    </section>

  <!-- Reusing Styles -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-4">
          Reusing Styles
      </h1>
      <!-- Consistent styling with Tailwind utilities -->
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Card</h2>
          <p class="text-gray-700">Reusable card with Tailwind utilities.</p>
        </div>
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Profile</h2>
          <p class="text-gray-700">Consistent profile box styling.</p>
        </div>
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Info Panel</h2>
          <p class="text-gray-700">Styled info panel for uniform design.</p>
        </div>
      </div>
       <p class="font-bold mt-4 text-center">
            Reuses the same styles for each Card.
        </p>
    </section>

    <!-- Adding Custom Styles -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-2">
          Adding Custom Styles
      </h1>
      <!-- Use Tailwind utilities with additional custom styles -->
      <div class="bg-teal-500 text-white p-4 rounded-lg 
                shadow-lg hover:bg-teal-600">
        <h2 class="text-xl font-semibold mb-2">
            Stylish Box
        </h2>
        <p>Styled with custom and Tailwind utilities.</p>
      </div>
    </section>
</body>

</html>
Print Page
Previous
Next