https://github.com/dev-warner/react-static-plugin-tailwindcss

A React-Static plugin that adds tailwindcss into your postcss plugins
https://github.com/dev-warner/react-static-plugin-tailwindcss

Last synced: 3 months ago
JSON representation

A React-Static plugin that adds tailwindcss into your postcss plugins

• Host: GitHub
• URL: https://github.com/dev-warner/react-static-plugin-tailwindcss
• Owner: dev-warner
• License: mit
• Created: 2019-09-07T19:59:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-06T20:52:52.000Z (over 3 years ago)
• Last Synced: 2023-03-02T15:37:13.363Z (almost 2 years ago)
• Language: JavaScript
• Size: 85.9 KB
• Stars: 10
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A React-Static plugin that adds tailwind support

[![npm version](https://badge.fury.io/js/react-static-plugin-tailwindcss.svg)](https://badge.fury.io/js/react-static-plugin-tailwindcss)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Installation

In an existing react-static site run:

### Tailwind v2

```bash

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

```

### Tailwind v1

```bash

$ yarn add react-static-plugin-tailwindcss [email protected] -D

```

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

```js

export default {

  plugins: ["react-static-plugin-tailwindcss"],

};

```

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

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

### CSS-in-JS

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

```bash

yarn add tailwind.macro@next

```

static.config.js

```js

export default {

  plugins: [

    [

      "react-static-plugin-tailwindcss",

      {

        cssInJs: true,

      },

    ],

  ],

};

```

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

```js

module.exports = {

  tailwind: {

    config: "./tailwind.config.js",

    format: "auto",

  },

};

```

Now you can use the tw macro inside styled components

```js

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

```js

export default {

  plugins: [

    [

      "react-static-plugin-tailwindcss",

      {

        autoPrefixer: false,

      },

    ],

  ],

};

```