Gatsby TailwindCSS + TUI Recipe

postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    }
  },
  variants: {},
  plugins: [require('@tailwindcss/ui')]
}

tailwind.css

@import url(https://rsms.me/inter/inter.css);

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwindcss-gatsby-recipe.mdx

Setup Gatsby with TailwindCSS + TailwindUI (TUI)

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

---

Install necessary NPM packages

---

Install necessary Gatsby Plugins

---

Setup necessary Files

You are good to go

using-tailwindcss.js

import React from "react"
import '../styles/tailwind.css'

export default () => (<h1 className="text-3xl">This is a 3xl text</h1>)

Thanks!

Question. How do you manage AlpineJS? In TUI, we have menu, tabs, KEY shortcuts, all driven by alpinejs. It's the only part i'm missing :-p

Question. How do you manage AlpineJS? In TUI, we have menu, tabs, KEY shortcuts, all driven by alpinejs. It's the only part i'm missing :-p

So this is up to you to implement the individual TUI components. This Gatsby recipe just pulls in the required dependencies and setups the tailwind config.

OK, I understand you don't need AlpineJS. Thanks !