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