Light it Tailwind Design System

A TailwindCSS preset for our base styles and design tokens at Light it

Usage

If you don't already have a tailwind.config.js file in your project root, generate one with npx tailwindcss init

Run npm i @lightit/twilight or yarn add @lightit/twilight to install the preset in your project

Then add the preset to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  presets: [require('@lightit/twilight')],
};

This preset runs the tailwind config in JIT mode. This means that you must make sure to configure your purge option in your tailwind.config.js file with all of your template files so that JIT mode can know which files to scan:

module.exports = {
  // These paths are just examples, customize them to match your project structure
  purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  // ...
  presets: [require('@lightit/twilight')],
};

You can continue to add other configurations in your tailwind.config.js file for things like important, etc...

Other notes

Learn more about TailwindCSS presets here: https://tailwindcss.com/docs/presets