rollup-plugin-tailwind

Transform TailwindCSS classes to CSS-in-JS compatible object at build time. Tested with Emotion and Glamor but any CSS-in-JS library that accepts the same style object should work without a problem.

Installation

npm install --save-dev rollup-plugin-tailwind

Usage

// rollup.config.js
import tailwind from 'rollup-plugin-tailwind';
 
export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [
    tailwind()
  ]
})

Example

Before:

import { css } from "emotion";
 
const classes = css(tailwind`text-white capitalize`);

After:

import { css } from "emotion";
 
const classes = css({
  color: "#fff",
  textTransform: "capitalize"
});

Options

config

• Type: String (default: tailwind.config.js)

Changes the path of Tailwind configuration file

tailwind({
  config: "tailwind.js"
});

function

• Type: String (default: tailwind)

Changes the function name plugin is looking for to transform

tailwind({
  function: "tw"
});

only

• Type: Array<String> (default: [])

Array of minimatch strings to only include certain files

tailwind({
  only: ["*.js"]
});