Skip to content
Tailwind CSS Addons

Tailwind CSS Addons

A set of Tailwind CSS preflights, themes, utilities and variants.

Installation

  1. Install the package:
Terminal window
npm install tailwindcss-addons
  1. Import the package:
@import "tailwindcss";
@import "tailwindcss-addons";

How to import?

All of the preflights, themes, utilities, and variants are imported by default, except:

  • "tailwindcss-addons/theme/font-weight-regular.css"
  • "tailwindcss-addons/utilities/align-justify-place.css"

Preflight

Import all preflights using:

@import "tailwindcss-addons/preflight";

The following preflights are available:

@import "tailwindcss-addons/preflight/reset-number-input.css";
@import "tailwindcss-addons/preflight/reset-search-input.css";

Theme

Import all themes using:

@import "tailwindcss-addons/theme";

The font-weight-regular theme is not included.

The following themes are available:

@import "tailwindcss-addons/theme/font-size.css";
/* @import "tailwindcss-addons/theme/font-weight-regular.css"; */

Utilities

Import all utilities using:

@import "tailwindcss-addons/utilities";

The align-justify-place utilities is not included.

The following utilities are available:

/* @import "tailwindcss-addons/utilities/align-justify-place.css"; */
@import "tailwindcss-addons/utilities/bg-grid.css";
@import "tailwindcss-addons/utilities/bg-radial.css";
@import "tailwindcss-addons/utilities/dir.css";
@import "tailwindcss-addons/utilities/drag.css";
@import "tailwindcss-addons/utilities/flip.css";
@import "tailwindcss-addons/utilities/hide-show.css";
@import "tailwindcss-addons/utilities/inset-center.css";
@import "tailwindcss-addons/utilities/overflow-unset.css";
@import "tailwindcss-addons/utilities/reset-number-input.css";
@import "tailwindcss-addons/utilities/reset-search-input.css";
@import "tailwindcss-addons/utilities/scrollbar-color.css";
@import "tailwindcss-addons/utilities/scrollbar-width.css";
@import "tailwindcss-addons/utilities/tap.css";

Variants

Import all variants using:

@import "tailwindcss-addons/variants";

The following variants are available:

@import "tailwindcss-addons/variants/hocus.css";