Tailwind CSS

File size
7.4KB
Lines of code
174

Tailwind CSS

Powerful inline styling with CSS classes.

Introduction

  • no CSS rules, instead pre-defined utility classes are applied to style each HTML element
  • each Tailwind CSS class corresponds to a single CSS property (or group of related properties) via atomic classes affording minute tweaks in styling
  • responsive design is built-in
  • supports rapid iteration and flexible development
  • stay within your HTML file throughout production

Example

<!-- --- EXAMPLE --- -->
  <!-- each use of inline Tailwind CSS has annotations underneath -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>watermelon Tailwind CSS pineapple</title>
  <script src="https://cdn.tailwindcss.com"></script> <!-- include Tailwind CSS play CDN for quick development, not for final production -->
</head>

<body class="bg-gray-100"> 
<!-- bg-gray-100 => sets the background color of the body to a light gray -->

  <header class="bg-blue-500 text-white p-4">
  <!-- bg-blue-500 => sets the background color of the header to a medium blue -->
  <!-- text-white => sets the text color to white -->
  <!-- p-4 => adds padding of 1rem on all sides -->

    <h1 class="text-3xl font-bold">Welcome to Tailwind CSS</h1>
    <!-- text-3xl => sets the font size to 1.875rem -->
    <!-- font-bold => sets the font weight to bold -->

  </header>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- grid => creates a CSS grid container -->
  <!-- grid-cols-1 => specifies the creation of one column for mobile devices -->
  <!-- md:grid-cols-2 => specifies the creation of two columns for medium-sized screens and up -->
  <!-- gap-4 => adds a gap of 1rem between grid items -->

    <div class="bg-green-200 p-4 rounded">
    <!-- bg-green-200 => sets a light green background color -->
    <!-- p-4 => adds padding of 1rem on all sides -->
    <!-- rounded => applies a small border radius to the HTML element -->

      <p class="text-green-800 font-medium">Easy to learn</p>
      <!-- text-green-800 => sets the text color to a dark green -->
      <!-- font-medium => sets the font weight to medium -->

    </div>

  </div>

  <button class="mt-6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">
  <!-- mt-6 => adds a top margin of 1.5rem -->
  <!-- bg-blue-500 => sets the background color to medium blue -->
  <!-- hover:bg-blue-600 => changes the background color to a darker blue on hover -->
  <!-- text-white => sets the text color to white -->
  <!-- font-bold => sets the font weight to bold -->
  <!-- py-2 => adds vertical padding of 0.5rem -->
  <!-- px-4 => adds horizontal padding of 1rem -->
  <!-- rounded => applies a small border radius -->
  <!-- transition duration-300 => adds a smooth transition effect over 300ms -->

    Learn More
  </button>

</body>
</html>

More on

Tailwind component libraries for use with Next.js