tailwindcss-extend

Compile your tailwindcss components into tailwind plugins and enjoy full autocompletion!

Installation

# npm
npm i tailwindcss-extend

# pnpm
pnpm i tailwindcss-extend

# yarn
yarn add tailwindcss-extend

Usage

Cli

Usage
    $ tailwindcss-extend [options]

Options
    -p, --pattern    pattern to match files
    -t, --type       output type, "module" or "commonjs"  (default commonjs)
    -o, --output     output path  (default tailwindcss-extend.cjs)
    -w, --watch      watch for changes  (default false)
    -v, --version    Displays current version
    -h, --help       Displays this message

Example

tailwindcss-extend -p 'styles/**' --watch

Vite

If you are using vite as a bundler you can directly use the plugin instead of the cli:

// vite.config.ts

import { defineConfig } from 'vite';
import tailwindcssExtend from 'tailwindcss-extend/vite';

export default defineConfig({
    plugins: [
        tailwindcssExtend({
            // required param
            pattern: '**/styles/*',

            // optional params with defaults
            output: 'tailwindcss-extend.cjs',
            type: 'commonjs'
        })
    ]
});

TailwindCSS config

Add the compiled plugin to your tailwind config:

// tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const config = {
    ...
    plugins: [
        ...

        // this points to the genereted file
        require('./tailwindcss-extend.cjs')
    ]
};

module.exports = config;

Config

Editing the theme inside the tailwind config doesn´t feel very natural due to the use of css in js. With tailwindcss-extend you can set your config directly inside (post-)css!

This:

:config {
    theme {
        extend {
            colors {
                --brand: #fa3;
            }
        }
    }
}

compiles to:

const config = {
    theme: {
        extend: {
            colors: {
                brand: '#fa3'
            }
        }
    }
};

You can even use css variables to dynamicly set your theme!

@layer base {
    :root {
        --bg: 255 255 255;
        --fg: 51 51 51;
    }

    @media (prefers-color-schema: dark) {
        :root {
            --bg: 51 51 51;
            --fg: 255 255 255;
        }
    }
}

:config {
    theme {
        extend {
            textColor {
                --main: rgb(var(--fg) / __alpha_value__);
            }
            backgroundColor {
                --main: rgb(var(--bg) / __alpha_value__);
            }
        }
    }
}

compiles to:

const config = {
    theme: {
        extend: {
            textColor: {
                main: 'rgb(var(--fg) / <alpha-value>)'
            },
            backgroundColor: {
                main: 'rgb(var(--bg) / <alpha-value>)'
            }
        }
    }
};

License

MIT