Tailwind CSS

Purpose

• It is used to create a set of utility class based on your theme configurations

Installation

• Install the dependency

# Using npm
npm install tailwindcss autoprefixer postcss postcss-cli

• Create a CSS file and inject tailwind's bases, components and utilities on it

input.css

@tailwind base;

@tailwind components;

@tailwind utilities;

• Generate the tailwind config, so that we can customize the style on it later

npx tailwindcss init --full

• Set up post css configuration file

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

• Compile into a set of utility classes on output.css based on your settings and input.css

npx tailwindcss build input.css -o output.css

Utility-First Fundamentals

• Using utility classes to build custom designs without writing CSS to prevent from the growth css file

• The reusability of style is achieved based on separation of component instead of css class

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Configuration

• The configuration is mainly include content, theme & plugins

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ]
}

Content

• The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

• Tailwind uses a very simple approach to detecting class names in your content, and generate the your used class into output.css

Theme

• The theme section of your tailwind.config.js file is where you define your project’s design system

• You can extend or override the default theme

Plugin

• Apply 3rd plugin which is a set of configuration to override or extend the theme

Directive

• Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

@tailwind

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

• Base class stands for the a set of tailwind default element class

h1 {
    ...
}

h2 {
    ...
}

• Component class stands for the custom class that applied tailwind utility class

.btn {
    ...
}

• Utilities class stands for the utility class that the content used

.mt-5 {
    ...
}

@layer

• To customize the tailwind class in different levels

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

@apply

• Use @apply to inline any existing utility classes into your own custom CSS.

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

@config

• To specify the source tailwind config file

@config "./tailwind.site.config.js";

Functions

• Tailwind adds a few custom functions you can use in your CSS to access Tailwind configuration values.

.content-area {
  height: calc(100vh - theme(spacing.12));
}

@media screen(sm) {
  /* ... */
}

Component Library

• Flowbite https://flowbite.com/docs/getting-started/introduction/

• Tailwind UI