DOCSEARCHbyAlgolia
Submit Docs

Tailwind CSS Documentation

website·Indexed 29 days ago

https://tailwindcss-v0.netlify.app/

Documentation for Tailwind CSS, featuring utility classes for layout, spacing, typography, and colors. Includes guides on Flexbox, Grid, positioning, and customizing the framework via plugins and new utilities, as well as examples for building buttons, forms, cards, and navigation.

Tokens
41.2K
Snippets
325
Records
333
Agent score
72%

What's inside Tailwind CSS

  1. Overview of Tailwind CSS utility-first approach

    Tailwind CSS is a utility-first CSS framework used for building custom user interfaces. Unlike UI kits (such as Bootstrap or Bulma), Tailwind does not provide pre-designed components or a default theme. Instead, it provides low-level, composable utility classes that allow developers to build complex designs directly in HTML without writing custom CSS.
    <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="..." alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

  2. Understand the Tailwind configuration system

    The Tailwind configuration file serves as an executable style guide for the project's design system (colors, font stacks, type scale, border sizes, breakpoints, etc.). A key characteristic of this system is that settings are not coupled to each other; deleting all values for a specific module will not cause systemic failures.

  3. Disable the built-in container plugin

    The container component is included as a built-in plugin. To disable it, remove the tailwindcss/plugins/container requirement from the plugins array in your configuration file.
    module.exports = {
  // ...
  plugins: [
    // Remove this line to disable the container plugin:
    // require('tailwindcss/plugins/container')(),
  ],
}

  4. Build basic grids using Flexbox and width utilities

    Tailwind does not provide purpose-built grid classes; instead, grids are constructed by combining flex on the container and percentage-based width utilities (e.g., w-1/2, w-1/3, w-1/4) on the child columns.

    <!-- Three columns --> <div class="flex mb-4"> <div class="w-1/3 bg-grey-light h-12"></div> <div class="w-1/3 bg-grey h-12"></div> <div class="w-1/3 bg-grey-light h-12"></div> </div>

  5. Create responsive variants for custom utilities

    To make custom utilities responsive based on the breakpoints defined in your Tailwind configuration, wrap the utility definitions in the @responsive { ... } directive. Tailwind will automatically generate the corresponding prefixed classes (e.g., sm:, md:, lg:) and group them into the appropriate media queries at the end of the generated CSS file.
    @tailwind preflight;
@tailwind components;
@tailwind utilities;

@responsive {
  .bg-cover-image {
    background-image: url('/path/to/image.jpg');
  }
}

  6. Implement responsive designs using Tailwind breakpoints

    Tailwind uses a "mobile-first" approach where each screen-size prefix (e.g., sm:, md:, lg:, xl:) represents a minimum viewport width. Classes applied at a smaller breakpoint are inherited by larger breakpoints unless explicitly overridden. To apply a utility only at a specific screen size or larger, prefix the utility class with the corresponding breakpoint name.
    <!-- Font is normal by default, bold on small screens, and extra bold on large screens -->
<div class="font-normal sm:font-bold lg:font-extrabold">
  Responsive text
</div>

  7. Quickly prototype with Tailwind CSS via CDN

    For quick demos or testing, you can include Tailwind CSS directly in your HTML via CDN. Note that many advanced customization features are unavailable when using the CDN build.

    <!-- Default configuration build --> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/tailwind.min.css" rel="stylesheet">

    <!-- Separate base styles and utilities --> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/preflight.min.css" rel="stylesheet"> <!-- Your custom CSS here --> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/utilities.min.css" rel="stylesheet">

  8. Use responsive and state variants for border colors

    Border color utilities can be modified using state and responsive prefixes. Responsive prefixes ({screen}:) and state prefixes (hover:, focus:) can be combined, with the responsive prefix always coming first.
    <!-- Responsive: Green border on medium screens and above -->
<div class="md:border-green"></div>

<!-- Hover: Red border on hover -->
<button class="border-2 border-blue hover:border-red">Button</button>

<!-- Focus: Blue border on focus -->
<input class="border-grey-light focus:border-blue">

<!-- Combined: Blue border on medium screens, darker blue on hover at medium screens -->
<button class="md:border-blue md:hover:border-blue-dark">Button</button>

<!-- Combined: Lighter grey on medium screens, white on focus at medium screens -->
<input class="md:border-grey-lighter md:focus:border-white">

  9. Generate custom utility variants with @variants

    The @variants directive allows you to generate responsive, hover, focus, active, group-hover, and focus-within versions of your own custom CSS classes. Variants are generated in the order they are listed in the directive; place higher-priority variants (like focus) after lower-priority ones (like hover).
    @variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Generates: .banana, .hover\:banana:hover, .focus\:banana:focus */

  10. Apply font weight based on screen size or state

    Font weight utilities can be combined with responsive breakpoints and state variants.

    • Responsive: Use {screen}: prefix (e.g., md:font-bold) to apply weight at specific breakpoints and above.
    • Hover: Use hover: prefix (e.g., hover:font-bold) to change weight on mouse-over.
    • Focus: Use focus: prefix (e.g., focus:font-bold) to change weight when an element is focused.

    Responsive prefixes must be placed before state prefixes (e.g., md:hover:font-bold).

    <!-- Responsive weight -->
<p class="font-normal md:font-bold">Responsive Text</p>

<!-- Hover state -->
<a href="#" class="font-normal hover:font-bold">Hover me</a>

<!-- Focus state -->
<input class="font-normal focus:font-bold" value="Focus me">

<!-- Combined Responsive and Hover -->
<a href="#" class="md:font-normal md:hover:font-bold">Link</a>

  11. Remove unused CSS using PurgeCSS

    PurgeCSS analyzes your templates to identify used class names and removes all unused CSS rules from the final bundle. This is the most effective way to keep the CSS size under 10kb. When using PurgeCSS with Tailwind, a custom extractor is required to handle special characters (like : and /) used in Tailwind's utility classes.
    const glob = require("glob-all");
const PurgecssPlugin = require("purgecss-webpack-plugin");

// Custom PurgeCSS extractor for Tailwind that allows special characters in class names
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

// Example integration with Webpack/Laravel Mix
if (mix.inProduction()) {
  mix.webpackConfig({
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, "resources/views/**/*.blade.php"),
          path.join(__dirname, "resources/js/**/*.vue")
        ]),
        extractors: [
          {
            extractor: TailwindExtractor,
            extensions: ["html", "js", "php", "vue"]
          }
        ]
      })
    ]
  });
}

  12. Apply responsive align-content utilities

    To change the alignment of flex content at specific breakpoints, prefix the utility class with the screen size identifier (e.g., md:). For example, md:content-around applies the utility only at medium screen sizes and above.
    <div class="flex flex-wrap content-start md:content-around">
  <!-- items -->
</div>