Skip to content
Plug Tailwind CSS to your Gatsby website
JavaScript
Branch: master
Clone or download
Latest commit 72372e2 Jun 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src initial commit Oct 5, 2018
.babelrc initial commit Oct 5, 2018
.gitignore initial commit Oct 5, 2018
.npmignore initial commit Oct 5, 2018
README.md Update README.md Jun 3, 2019
package-lock.json update package.json and README.md Oct 5, 2018
package.json Update version Oct 5, 2018

README.md

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!

You can’t perform that action at this time.