react-static-plugin-tailwindcss

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