david-plugge / tailwindcss-extend Goto Github PK

9.0 1.0 1.0 114 KB

License: MIT License

TypeScript 100.00%

tailwindcss-extend's Introduction

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

tailwindcss-extend's People

Contributors

Stargazers

Watchers

Forkers

ramram1048

tailwindcss-extend's Issues

command not found: tailwindcss-extend

with Next14.5

WARN [vite:css] start value has mixed support, consider using flex-start instead

Hi there! Thanks for providing this tool!
After installing it with vite, I get the following error:

[6:38:48 PM]  WARN  [vite:css] start value has mixed support, consider using flex-start instead
61 |    transform: translate(-50%, -50%);
62 |    display: flex;
63 |    justify-content: start;
   |     ^
64 |    overflow: hidden;
65 |    align-items: center;

What I am wondering is, that I don't even wrote this anywhere. Maybe the warning is about the generated CSS?

My config:

// vite
tailwindcssExtend({
  pattern: '**/assets/css/**',
  output: 'tailwind.plugin.gen.ts',
  type: 'module',
}),

/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	*:focus {
		@apply outline-brand-100 outline-2 outline-offset-4;
	}

	html {
		@apply bg-gray-0 text-gray-700;
		@apply text-[14px] lg:text-[16px];

		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}

	body {
		@apply text-body-100 underline-offset-2 overflow-y-scroll;
	}

	pre {
		font-size: 12px;
		@apply p-4 bg-gray-100 leading-tight overflow-x-scroll;
	}
}

/* assets/css/plugin.css */
/* Later gets transformed into tailwind js plugin by tailwindcss-extend */
@layer utilities {
	.PageGrid {
		@apply grid grid-cols-4 lg:grid-cols-12 gap-x-4 gap-y-8;
	}

	.RichtextBlock {
		@apply my-7 first:mt-0 last:mb-0;
	}

	.text-body-50 {
		@apply font-label;
		font-size: 1rem;
		line-height: 1.4rem;
		@screen lg {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}
	}

	.text-body-100 {
		@apply font-body;
		font-size: 1.375rem;
		line-height: 1.875rem;
	}

	.text-heading-100 {
		@apply font-display uppercase text-brand-100;
		font-size: 1.2rem;
		line-height: 1.5rem;
		@screen lg {
			font-size: 1rem;
			line-height: 1.25rem;
		}
	}

	.text-heading-200 {
		@apply font-display font-extrabold uppercase text-brand-100;
		font-size: 1.375rem;
		line-height: 1.875rem;
		letter-spacing: -0.03em;
	}

	.text-heading-300 {
		@apply font-body text-gray-600;
		font-size: 1.375rem;
		line-height: 1.875rem;
	}

	.text-heading-400 {
		@apply font-body text-gray-600;
		font-size: 2.25rem;
		line-height: 2.25rem;
	}

	.text-heading-450 {
		@apply font-display uppercase font-light;
		font-size: 1.75rem;
		line-height: 2rem;
		letter-spacing: -0.03em;
	}

	.text-heading-500 {
		@apply font-display uppercase font-light;
		font-size: 2.5rem;
		line-height: 2.5rem;
		letter-spacing: -0.05em;
	}

	.text-heading-600 {
		@apply font-display font-extralight uppercase text-brand-100;
		font-size: 2.75rem;
		line-height: 2.75rem;
		letter-spacing: -0.05em;
		@screen lg {
			font-size: 3.75rem;
			line-height: 3.75rem;
		}
	}
}

@layer components {
	.UILink {
		@apply block hover:text-brand-100;
	}

	.UILink-50 {
		@apply block text-brand-100 pl-3 text-body-50 hover:text-gray-600;

		&::before {
			content: '» ';
		}
	}
}

Add Vite as prereq. Or, support Webpack?

Thanks for the great work!

For folks who are using create-react-app and webpack, it would be very nice to make it super clear that Vite is a prereq.

Otherwise, maybe support webpack?

css.replaceAll is not a function

Hello. Thanks for the wonderful plugin. It makes life a lot easier :)

Unfortunately, due to the framework we use, we have to use Nodejs v14, which does not support the replaceAll() function (it appears in v15). What causes the error:

This line can be replaced with regex, which works similarly:

Can you release a patch with a fix?
We in the team would really like to use your plugin in our work as soon as possible. Thank you!