A React-Static plugin that adds tailwind support

Installation

In an existing react-static site run:

Tailwind v2

$ yarn add react-static-plugin-tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat -D

Tailwind v1

$ yarn add react-static-plugin-tailwindcss [email protected] -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,
      },
    ],
  ],
};