react-static-plugin-tailwindcss-purgecss v0.1.1

A React-Static plugin that adds tailwind support

Installation

In an existing react-static site run:

$ yarn add react-static-plugin-tailwindcss -D

Then add the plugin to your static.config.js:

export default {
  plugins: ["react-static-plugin-tailwindcss"]
};

Now you can add @tailwind directives to your .css files

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS-in-JS

If you're wanting to use tailwind in conjuction with styled-components for example

yarn add tailwind.macro@next

static.config.js

export default {
  plugins: [
    ["react-static-plugin-tailwindcss", {
      cssInJs: true
    }]
  ]
};

Create a babel-plugin-macros.config.js file

module.exports = {
    tailwind: {
        config: './tailwind.config.js',
        format: 'auto'
    }
}

Now you can use the tw macro inside styled components

import tw from "tailwind.macro";
import styled from "styled-components"

export const Header = styled.h1`
  ${tw`text-4xl font-bold text-center text-blue-500`}
`;

Autoprefixer

If you already handle auto prefixer or dont want to use it

export default {
  plugins: [
    ["react-static-plugin-tailwindcss", {
      autoPrefixer: false
    }]
  ]
};

PurgeCSS

If you want to remove unused Tailwind CSS, enable https://github.com/FullHuman/postcss-purgecss plugin

export default {
  plugins: [
    ["react-static-plugin-tailwindcss", {
      purgeCss: true,
      purgeCssOptions: {
        content: ["**/*.tsx"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      }
    }]
  ]
};

Create a purgecss.config.js file

module.exports = {
    content: ['./**/*.html'],
    css: ['./src/app.css']
}