gatsby-theme-tastyled v1.0.5

Tailwind CSS + Styled Components + PurgeCSS

This theme installs Tailwind CSS + PostCSS + PurgeCSS + Styled Components (with twin macro).

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: {
    preset: 'styled-components',
  },
};

Example Usage

import React, { useState } from 'react';
import tw, { styled } from 'twin.macro';

const Container = styled.div`
  ${tw`p-4`}
  ${({ isLight }) => (isLight ? tw`py-2` : tw`py-2 bg-black`)}
  .heading {
    ${tw`text-xl`}
    ${({ isLight }) => (isLight ? tw`text-black` : tw`text-white`)}
  }
  button {
    ${tw`mt-2 p-2 rounded-lg font-bold`}
    ${({ isLight }) => (isLight ? tw`bg-black text-white` : tw`bg-white`)}
  }
`;

export default () => {
  const [isLight, setLight] = useState(true);
  return (
    <Container isLight={isLight}>
      <p className="heading">Homepage in a users site</p>
      <button onClick={() => setLight(!isLight)}>Toggle color</button>
    </Container>
  );
};