tailwind-type-generator - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

generator.js

		@@ -130,3 +130,3 @@ #!/usr/bin/env node
		.map(function (selector) { return selector.split(" ")[0]; }) // remove selector behind first space
		.filter(function (selector) { return selector.replace(/^-/, ""); }) // remove selectors starts with hyphen
		.map(function (selector) { return selector.replace(/^-/, ""); }) // remove selectors starts with hyphen
		.map(function (selector) { return selector.replace(/\\/g, ""); }) // remove escape sequence(\)
		@@ -133,0 +133,0 @@ .filter(function (selector) { return !selector.match(/--/); }) // remove selectors with two or more consecutive hyphens

package.json

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

README.md

		# tailwind-type-generator

		Generate type definition file of Tailwind CSS classnames.
		Simply exports type declaration file of Tailwind CSS classnames.

		## Work In Progress
		---

		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)} />;
		}
		```

New alerts