react-static-plugin-tailwindcss-purgecss

A React-Static plugin that adds tailwind support

Installation

In an existing react-static site run:

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

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

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

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"],
};

• This is equivalent of setting purgeCssOptions in the example above.
• But due to #296, it is not being loaded atm.