1. Find the npm install commands that match your Framework : https://tailwindcss.com/docs/installation.
   1. Install it in your project's package : npm install -D tailwindcss
   2. Initialize it : npx tailwindcss init
   3. Set it up : ~/tailwind.config.js
   4. Build your CSS : npx tailwindcss build -o output.css
2. Add the optional node module prettier-plugin—tailwindcss

   When running the build script, this Prettier plugin looks for Tailwind classes in your templates to sort your CSS according to the recommanded layer VS class order.

3. Install this VS Code plugin Tailwind CSS Intellisense

   This plugin displays the detailed CSS code of a particular class when you mouse-hover it.

4. Import the 3 Tailwind layers in your project’s main CSS file ~/index.css using Tailwind’s proprietary method @tailwind.

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

5. Run your project locally

   npm run dev

In its core logic, Tailwind is composed of these 3 layers base, components and utilities. You need to import them in the main CSS file located at the root of your project.

base layer

What affects the styling of the entire app such as color palets, font-size, a,a:hover,a:focus etc.

component layer

Reusable modular styles.

utilities layer

Any short hand class that are not covered natively by Tailwind.

« Preflight » is an opinionated set of base styles that comes as default style rules with Tailwind.

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

* {
  /* this custom style will over-rule stuff from EVERYWHERE in Tailwind */
}

@layer components {
  .card {
    @apply flex items-center justify-center; /* the @apply method extends Tailwind’s class within our own CSS */
    …
  }
}

You can also add base styles by writing a plugin and using the addBase function.

1. Backgrounds : bg-{color}
2. Borders : border-{color}
3. Text : text-{color}

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'brand': {
        light: 'hsl(147, 50%, 60%)',
        DEFAULT: 'hsl(147, 50%, 47%);',
        dark: 'hsl(147, 50%, 35%);',
      }
    }
  }
}

Class names are snake-case and needs to be organized by sub-arrays of sceme within the theme array.

export default {
  content: { … }
  theme: {
    extend: {
      colors: {
        my-color-example: #faf,
      }
    }
  }
}

<div class="$breakpoint:class-name" />

@media (min-width: $pixelValue) { … }

$breakpoint	Bootstrap convention	device	$pixelValue (default)
-	Extra small	Phone	-
sm	Small	Phone	640px
md	Medium	Phone horizontal + Tablet vertical	768px
lg	Large	Tablet vertical + Laptop screen	1024px
xl	Extra Large	Tablet horizontal + Laptop and Desktop screens	1280px
2xl	Extra Extra Large	Desktop screen and 4K TV	1536px

An example of a div that is {display: flex} from Medium (min-width: 768px) to Large (max-width: 1024px) breakpoints only.

<div class="md:max-lg:flex" />

In Tailwind the container class is NOT exactly like the CSS @container; In the later it sets the max-width of an element to match the min-width of the current breakpoint.

Use the columns-{count} utilities to set the number of columns that should be created for the childs within the parent element. The column width will be automatically adjusted to accommodate that number.

To specify the width between columns, you can use the gap-x utilities.

<div class="columns-3 gap-8 …">
  <img class="w-full aspect-video …" src="…" />
  <img class="w-full aspect-square …" src="…" />
  <!-- … -->
</div>

⚠ IMPORTANT!
Tailwind is by default a Light mode scheme. As of the current version of Tailwind CSS (v2.2), there is no built-in light: variant like there is a dark: class prefix. So fundamentally « Dark mode » is ALWAYS the exception.

<div className="bg-black dark:bg-white" />

You can also build sites that support toggling dark mode manually using the class strategy.

module.exports = {
  darkMode: 'class',
  …
}

Read about « Supporting system preference and manual selection » to know how you can support Light VS Dark mode, as well as respecting the operating system preference.

1. Font Family : By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack (font-sans), a cross-browser serif stack (font-serif), and a cross-browser monospaced stack (font-mono). Custom font families can be manage either from « ~/tailwind.config.js» or with @layer components{} in the main CSS file.
2. Hover, Focus and other link states

   <div class="font-sans hover:font-serif" />

1. https://flowbite.com/tools/tailwind-cheat-sheet/

• material-tailwind.com : An open-source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier.
• tailwindcomponents.com : A free repository for community components using Tailwind CSS.
• flowbite.com : Prebuild components on top of Tailwind CSS.