Getting Started

Setup

Prerequisites

• Node.js version 18 or higher.

Installation

npm

$ npm add -D @titanom/css2tailwind

pnpm

$ pnpm add -D @titanom/css2tailwind

yarn

$ yarn add -D @titanom/css2tailwind

bun

$ bun add -D @titanom/css2tailwind

Configuration

Add following scripts to your package.json.

{
  "scripts": {
    "styles:build": "css2tailwind src/styles .styles", 
    "styles:watch": "css2tailwind src/styles .styles --watch"
  }
}

WARNING

If you are type-checking tailwind.config.ts, make sure to build the styles beforehand.

Edit your tailwind.config.ts.

import plugin from 'tailwindcss/plugin.js'; 

import base from './.styles/base.json'; 
import utilities from './.styles/utilities.json'; 
import components from './.styles/components.json'; 

import type { Config } from 'tailwindcss';

const config = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  plugins: [ 
    plugin( 
      ({ addComponents, addUtilities, addBase }) => { 
        addBase(base); 
        addUtilities(utilities); 
        addComponents(components); 
      }, 
    ), 
  ], 
} satisfies Config;

export default config;

TIP

The names and existence of the imported .json files depends on your file sturcture and might not be exactly the same.

Exclude the output directory from source-control.

.styles

Create the styles directory.

$ mkdir src/styles

Create the style subdirectories.

$ mkdir src/styles/base
$ mkdir src/styles/utilities
$ mkdir src/styles/components

TIP

Each of the subdirectories corresponds to a json file in the output directory.
e.g.: src/styles/base/ -> .styles/base.json

You can create as many subdirectories inside your styles directory as you want and give them arbitrary names. Just remember to update the imports from the output directory accordingly.

If a directory does not include any files, git will not track it. To prevent this you can add an empty .gitkeep inside the directory.