Plug Tailwind CSS to your Gatsby website
Switch branches/tags
Nothing to show
Clone or download
muhajirframe Merge pull request #1 from juankaram/patch-1
Small typo on the readme file
Latest commit 3adc961 Oct 31, 2018
Permalink
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 Oct 31, 2018
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

Enjoy!