tailwindcss-turbine weekly downloads statistics

tailwindcss-turbine

Note - This plugin currently only officially supports Tailwind CSS v2.1 and upwards

tailwindcss-turbine is a plugin that was built to easily generate different component classes for your application. The goal of this project is to be able to easily use custom Tailwind CSS elements within your own app.

For example, the default options for Turbine will generate .btn classes based on the buttons designed in tail-kit. It's easy to make reusable components by simply copying the Tailwind CSS styles into the Turbine config and using the generated classes.

Installation

Usage

In your tailwind.config.js:

How It Works

For each color in your theme, Turbine will generate a class name resembling .{prefix}-{color} and have the provided styles for each color. Styles are applied in separate steps following a specific hierarchy:

baseStyles string | Function which returns Tailwind CSS styles that utilize theme colors | ` (color) => @apply bg-${color}-500 text-white ` | | colorValidator? | (color, values) => boolean | Function which is used to only generate components for theme colors that meet the requirements | (color, values) => color !== 'gray' |

Troubleshooting

*Tailwind CSS is throwing a class not found error for one of my colors.*

This has to do with one of the colors in your theme not having a value for the color class you are requesting. There are two solutions for this: 1. Add a color value to your theme config that matches the class name used in your colorStyles 2. Modify/Add the colorValidator to prevent the target color/value from having Turbine-generated styles

Description from the npm listing.