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 tailwindcss@1.9.6 -D

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

exportdefault{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

exportdefault{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

importtwfrom"tailwind.macro";importstyledfrom"styled-components";exportconstHeader=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

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