DOCSEARCHbyAlgolia
Submit Docs

Tailwind CSS v2 Documentation

website·Indexed 19 days ago

https://v2.tailwindcss.com/

Documentation for Tailwind CSS v2, featuring utility class references for transforms, filters, transitions, and layout. Includes installation guides for frameworks such as Laravel, Next.js, Gatsby, Create React App, Vue 3 with Vite, and Nuxt.js.

Tokens
109.7K
Snippets
995
Records
1K
Agent score
99%

What's inside Tailwind CSS v2

  1. Style placeholder text color in Tailwind CSS v2

    Use the placeholder-{color} utility classes to control the color of the placeholder text within input elements. These utilities apply the color specifically to the ::placeholder pseudo-element.

  2. Control line height with Tailwind CSS v2 utilities

    Tailwind CSS v2 provides utilities to control the leading (line height) of an element. These are split into relative line-heights (based on the current font-size) and fixed line-heights (independent of font-size).

  3. Apply background colors using bg-{color} utilities

    In Tailwind CSS v2, use the bg-{color} utility classes to set the background color of an element. These utilities apply the corresponding background-color CSS property to the target element.

  4. Apply text color using Tailwind CSS v2 utilities

    Use the text-{color} utility classes to control the text color of an element in Tailwind CSS v2. These utilities allow you to set the foreground color of text based on the default Tailwind color palette.

  5. Set the color of outline ring offsets in Tailwind CSS v2

    Use the ring-offset-{color} utility classes to change the color of the offset space between an element's border and its ring outline. This is typically used to make the ring appear separated from the element by matching the offset color to the background color of the parent container.

  6. Control border colors between elements using Divide Color utilities

    Tailwind CSS v2 provides divide-{color} utilities to control the color of the borders placed between child elements of a container. These utilities are typically used in conjunction with divide-x or divide-y to style the separators between a list of items.

  7. Understand Tailwind CSS Preflight base styles

    Preflight is an opinionated set of base styles built on top of modern-normalize designed to smooth cross-browser inconsistencies. It is automatically injected into the CSS when the @tailwind base directive is used. Preflight applies several global resets, including removing default margins from block elements, unstyling headings and lists, making images block-level, and resetting global border styles.
    @tailwind base; /* Preflight is injected here */
@tailwind components;
@tailwind utilities;

  8. Include Tailwind directives in CSS

    Add the @tailwind directives for base, components, and utilities to your main CSS file (e.g., ./src/index.css) and ensure this CSS file is imported into your main entry point (e.g., ./src/index.js).
    /* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
    // src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Import the CSS file
import App from './App';

  9. Control numeric font variants in Tailwind CSS v2

    Use font-variant-numeric utilities to enable specific glyphs for numbers, fractions, and ordinal markers. These utilities are composable, meaning multiple classes can be applied to a single element. Note that these features depend on the font family's support; if a font does not support a specific OpenType feature, the utility will have no effect.
    <p class="ordinal slashed-zero tabular-nums">1234567890</p>

  10. Apply responsive floats at specific breakpoints

    To change the float behavior based on screen size, prefix the float utility with a responsive breakpoint (e.g., sm:, md:, lg:, xl:). For example, md:float-left will apply the float only on medium screens and larger.
    <div class="bg-gray-200 p-4">
  <!-- Float right by default, float left on medium screens and above -->
  <img class="float-right md:float-left" src="image.jpg">
  <p>Content that will wrap around the image...</p>
</div>

  11. Apply responsive text alignment

    To change text alignment at specific breakpoints, prefix the alignment utility with a screen size modifier (e.g., sm:, md:, lg:, xl:). For example, md:text-center applies center alignment only at medium screen sizes and above.
    <p class="text-left md:text-center">Left aligned on mobile, centered on medium screens and up</p>

  12. Apply backdrop invert filters in Tailwind CSS v2

    Use backdrop-invert or backdrop-invert-0 to determine if an element should be rendered with inverted backdrop colors or normally. These utilities must be used alongside the backdrop-filter utility to take effect.
    <div class="backdrop-filter backdrop-invert ...">
  <!-- ... 
</div>