gatsby-theme-taistyled v3.1.0

Tailwind CSS + Styled Components + PurgeCSS

This theme installs Tailwind CSS + PostCSS + Autoprefixer + Styled Components (with twin macro) and PurgeCSS for deleting unused Tailwind CSS code.

Configuration

Add Tailwind CSS's directives

As stated in the Tailwind documentation, you should create a css file with the base tailwind directives.

Create a site.css file with the following directives and include it in your project. In this example, I will use the root folder.

@tailwind base;

@tailwind components;

@tailwind utilities;

├── gatsby-config.js
├── node_modules
├── package.json
├── site.css

Include them in gatsby-browser.js

In your gatsby-browser.js, import your css directives

import './site.css';

Add Tailwind CSS Config File

Create tailwind.config.js at the root folder in order to start using twin.macro and also customize tailwindcss.

npx tailwindcss init

or

yarn tailwind init

Add twin.macro config

Create a babel-plugin-macros.config.js in order to use twin.macro with styled-components

module.exports = {
  twin: {
    styled: 'styled-components',
  },
};

Example Usage

import React from 'react';
import styled from 'styled-components';
import tw from 'twin.macro';

const Container = styled.div.attrs({
  className: 'py-8 bg-purple-800',
})`
  .heading {
    ${tw`text-white px-5 text-2xl`}
  }
`;

export default () => (
  <Container>
    <p className="heading">Homepage in a user site</p>
  </Container>
);