Tailwind

We use tailwind as styling system.

So you can:

• apply any Tailwind class
• configure it and add custom styles in the global CSS file

Configuration

The global CSS file is the tailwind entry point.

We follow the shadcn convention with CSS Variable.

Imports and plugins

The default global CSS file import

css⎘ Copy
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@plugin "@tailwindcss/typography";

where @tailwindcss/typography is used for Prose content that sets the default publishing style for headings, list, ...

Utilities class

• for the grid system
• icon

Custom Implementation

A custom default minimal implementation of the global CSS file would

• import the default interact configuration
• and add
  • the custom components directory
  • and the pages directory

Example:

css⎘ Copy
/* Interact default import */
@import "@combostrap/interact/global.css";

/* Your Pages if you use tailwind class in them */
@source "../pages";
/* Components */
@source "../components";

where the @source directive is a tailwind directive that add to directory to the scanner.