Getting Started with using Tailwind in Toast

Posted on: Oct 07, 2020

Initial Setup

Start out with a barebones Toast site:

git clone https://github.com/lannonbr/toast-barebones

Install Tailwind & create a tailwind config file in a utils folder.

yarn add tailwindcss
mkdir utils
cd utils
yarn tailwindcss init

Because everything in Toast is expected to be ES Modules and Tailwind doesn't support it yet, we'll have a utils folder for all tools with CommonJS. In the folder, add a empty package.json with the type field of commonjs.

{
  "type": "commonjs"
}

Then, we want to tell Tailwind where all of our markup will be located, which to start out can be done with a src/**/*.js glob in the purge field.

module.exports = {
  purge: ["src/**/*.js"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

CSS File Creation

Create a barebones CSS file with the default Tailwind layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then in the src/page-wrapper.js file, we can add a /style.css <link> tag with React Helmet:

/** @jsx h */
import { Fragment, h } from "preact";
import { Helmet } from "react-helmet";

const PageWrapper = (props) => {
  return (
    <Fragment>
      <Helmet>
        <link rel="stylesheet" href="/style.css" />
      </Helmet>
      {props.children}
    </Fragment>
  );
};

export default PageWrapper;

NPM Scripts

Next, we can add a npm script to build the CSS prior to the toast build.

{
  "scripts": {
    "breadbox": "breadbox --dest public/web_modules",
    "build:css-prod": "NODE_ENV=production tailwindcss build src/styles/style.css --config utils/tailwind.config.js --output public/style.css",
    "build:css": "tailwindcss build src/styles/style.css --config utils/tailwind.config.js --output public/style.css",
    "build": "yarn build:css-prod && toast incremental .",
    "clean": "rm -rf public .tmp && yarn breadbox",
    "incremental": "toast incremental .",
    "serve": "npx serve public"
  }
}

In development you can run build:css once which will generate all possible classes and then you just need to run the incremental script when rebuilding pages. That said, when you are deploying the site, you'll want to use PurgeCSS to get rid off excess CSS that is not being used. This is done by setting NODE_ENV to production which enables PurgeCSS in Tailwind.

Usage in pages

Now, you can insert tailwind classes into your preact code as such:

/** @jsx h */
import { h } from "preact";

const Index = (props) => {
  return (
    <div>
      <h1 class="text-blue-800 text-4xl font-black">Hello, Toast</h1>
    </div>
  );
};

export default Index;

Which will render out as expected:

If you wish to get the code for this post, clone down github.com/lannonbr/toast-tailwind