Skip to content

TailwindCss plugin to export Typescript typings, helpers and const from your config.

License

Notifications You must be signed in to change notification settings

mathieutu/tailwind-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind TS Generator

npm npm

⚡️ Generate Tailwind type from your own configuration!

This package is a Tailwindcss plugin that generates code out of your tailwind configuration. It has full support of your personalised config, and your plugins.

For example, it is used daily with @tailwind/ui and @tailwindcss/custom-forms. It doesn't change anything to your other postcss plugins like autoprefixer and purgecss.


usage with array

usage with helper


Installation

Add it to your dependencies

yarn add -D tailwind-ts

# or
npm install --save-dev tailwind-ts

Add it at the end of the plugins list in your tailwind.config.js file.

module.exports = {
  ...
  plugins: [
    ...
    require('tailwind-ts'),
  ],
};

And voilà!

Now a tailwind-types.ts file will be generated each time you generate your css with tailwind.

Configuration

You can select what you want to include in the generated file by passing options to the plugin:

module.exports = {
  ...
  plugins: [
    ...
    require('tailwind-ts')({ path: 'my-custom-file.ts' }),
  ],
};
Option Type Default value Usage
path string 'tailwind-type.ts' Path of the generated file (relative to your configuration file)
exportClassesChoice boolean true To generate the TailwindClass type (see usage)
exportClassesList boolean false To generate the TailwindClasses type (see usage)
exportClassNamesHelper boolean false To generate the tw helper (see usage)
exportConstants boolean false To generate all the tailwind inspired constants (see usage)

Usage

TailwindClass

With exportClassesChoice set, the package will generate and export an union type TailwindClass with all Tailwind available utilities :

export type TailwindClass = 'sr-only' | 'not-sr-only' | 'focus:sr-only' | ...

You can use it directly by importing the type from the generated file.

For example:

import { TailwindClass } from './tailwind-types'
const globalPaddingClass: TailwindClass = 'px-2.5'

const btnClasses: TailwindClass[] = [
  'inline-flex', 'items-center',
  globalPaddingClass, 'py-1.5', 'border', 'border-transparent',
  'text-xs', 'leading-4', 'font-medium', 'rounded',
  'text-indigo-700', 'bg-indigo-100',
  'hover:bg-indigo-50', 
  ...
]

return <button className={btnClasses.join(' ')}>Foo !</button>

tailwindClasses

With exportClassesList set, the package will generate and export an array tailwindClasses which lists all Tailwind available utilities:

export const tailwindClasses = [
  'sr-only',
  'not-sr-only',
  'focus:sr-only', 
  ...
] as const

You can use it directly by importing the const from the generated file.

For example:

import { tailwindClasses } from './tailwind-types'

const xlClasses = tailwindClasses
  .filter(className => className.includes('xl'))
  .map(className => className.replace('xl:', ''))
  ... 

tw

With exportClassNamesHelper set, the package will generate and export a function tw which is just a typed wrapper of classnames package:

type TailwindClassNamesFunction = ...

export const tw: TailwindClassNamesFunction = require('classnames')

You can use it directly by importing the function from the generated file.

For example:

import { tw } from './tailwind-types'

const shouldBeRed = true / false //useState, computed or whatever... your logic here!
const shouldBeBordered = true / false //useState, computed or whatever... your logic here!

const btnClasses = tw(
  'inline-flex', 'items-center',
  'px-0.5', 'py-1.5',
  'text-xs', 'leading-4', 'font-medium', 'rounded',
  'hover:bg-indigo-50', 
  shouldBeRed ? ['text-red-700', 'bg-red-100'] : ['text-indigo-700', 'bg-indigo-100'],
  { 'border': shouldBeBordered },
)

return <button className={btnClasses}>Foo !</button>

This is exactly the same syntax and features than classNames function here, but fully Tailwind typed.

Tailwind Constants

This one is a bit more special. With exportConstants set, the package will generate and export all the tailwind utilities as constants.

export const twBgGray50 = 'bg-gray-50' as const
export const twBgGray100 = 'bg-gray-100' as const
export const twHoverFontBold = 'hover:font-bold' as const
export const twH64 = 'h-64' as const
...

You can use it directly by importing the constants from the generated file.

For example:

import { twText3Xl } from './tailwind-types'

return <h1 className={twText3Xl}>Foo !</h1>

You have to note that because constants in javascript follow a specific syntax, and some words are forbidden, some rules have to be applied:

  • constants are camelCased,
  • a tw prefix is added. (mainly because of static utility which is not allowed as const name and so becomes twStatic),
  • all the : and - characters are removed,
  • the . is replace by Dot: w-3.5 becomes twW3Dot5
  • the / is replace by On: w-3/5 becomes twW3On5

Other?

By the way the plugin is made, it is really easy to add generated content from the list of classes. New generators could be added the core, or be the subject of plugins if there are some needs.

Example of generators: ReasonMl or flow typings, pure javascript constants, etc.

Please feel free to open an issue, so we can discuss that.

FAQ

Will tailwind-ts be in my browser bundle?

It's a big nope! The package is a nodejs tool, and is meant to be used only during development phase.

The generated file however can be included in your bundle depending on what you do with it, so be attentive to your building process, and the size of your bundle.

What are the dependencies of this package.

The only needed dependency of this package is ramda, a tool for data manipulation with functional programming flavor. Please check out of the code of this package to understand why and how it is amazing.

The package has also tailwindcss as a peerDependency, but it should not be a problem as it's actually a tool for Tailwind.

You also will need camelCase if you want to export the constants, and classnames if you want to export the classNames wrapper.

At the end, as said previously, this package will not be included in your bundle. You even can remove it after having generated the type if you want.

Another question?

Please feel free to ask!

License

This package is an open-sourced software licensed under the MIT license.

Contributing

Issues and PRs are obviously welcomed and encouraged, both for bugs and new features as well as documentation.

About

TailwindCss plugin to export Typescript typings, helpers and const from your config.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published