tailwind-type-generator - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

		{
		"name": "tailwind-type-generator",
		"version": "0.1.0",
		"version": "0.1.1",
		"description": "Generate type definition file of Tailwind CSS classnames.",
		@@ -5,0 +5,0 @@ "main": "generator.js",

README.md

		# tailwind-type-generator

		Simply exports type declaration file of Tailwind CSS classnames.

		---

		This library just exports [`tailwind.d.ts`](./tailwind.d.ts) from `tailwind.config.js` .

		It has `TailwindClassNames` type that lists Tailwind CSS class names.

		## Install

		```sh
		npm install --save-dev tailwind-type-generator

		# peerDependencies
		npm install --save tailwindcss
		```

		## Usage

		Example project is [./example](./example).

		Fist, export `tailwind.d.ts` .

		```sh
		npx tailwind-type-generator
		```

		Then create utility function and call from components.

		[`lib/tailwind.ts`](./example/lib/tailwind.ts)

		```typescript
		// lib/tailwind.ts
		type TailwindReturnType = "__TAILWIND";
		type TailwindParamType = TailwindClassNames \| TailwindReturnType;

		export const tailwind = (...classNames: TailwindParamType[]) => {
		return classNames.join(" ") as TailwindReturnType;
		};
		export const tw = tailwind;
		```

		```typescript
		// component.tsx
		import { tailwind, tw } from "./lib/tailwind";

		const textStyle = tailwind("text-white", "text-xl");

		export default function () {
		<div classNames={tw("bg-black", "w-full", "h-full", textStyle)} />;
		}
		```
		## Deprecated

New alerts