Home

Awesome

Gatsby Plugin Tailwind CSS

What

A Gatsby plugin to use Tailwind CSS with css-in-js. Like styled-components or emotion.js

TL;DR

If you want to quickly use Gatsby + Tailwind CSS + EmotionJS. There's already gatsby-tailwind-emotion-starter

Installation

Inside your Gatsby project

npm install --save gatsby-plugin-tailwindcss tailwindcss

Init Tailwind configuration

./node_modules/.bin/tailwind init

It will add tailwind.js to your root project

Add this plugin to your gatsby-config.js.

module.exports = {
  plugins: ['gatsby-plugin-tailwindcss'],
}

Add tw global to your .eslintrc

{
 ...
  "globals": {
    "tw": true
  },
 ...
}

You can now use Tailwind CSS with your favorite CSS-in-JS

This plugin use babel-plugin-tailwind-components under the hood.

Usage

With Emotion

Install gatsby-plugin-emotion

In your React Component

import React from 'react'
import styled from 'react-emotion'


const Container = styled.div`
  ${tw`py-8`};
`
const Text = styled.p`
  ${tw`bg-black text-white`};
`

const Home = () => (
  <Container>
    <Text>I am Text component made with Tailwind CSS + EmotionJS</Text>
  </Container>
)

export default Home

With Styled Components

Install gatsby-plugin-styled-components.

In your React Component

import React from 'react'
import styled from 'styled-components'


const Container = styled.div`
  ${tw`py-8`};
`
const Text = styled.p`
  ${tw`bg-black text-white`};
`

const Home = () => (
  <Container>
    <Text>I am Text component made with Tailwind CSS + Styled Components</Text>
  </Container>
)

export default Home

Using Vscode

Try this snippet plugin vscode-tailwind-styled-snippets

For more information

Contributing

Related

I recently uses monad-ui. If you love tailwind, you might wanna try it too :)

Enjoy!