Bootstrapping React with Tailwind

as so I remember

Published April 15, 2021 #react, #tailwindcss

This is straight from the Tailwind Install Guide but here so I can remember it easier.

Setup the project

  npx create-react-app my-app
  cd my-app

Install tailwindcss

  npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat \
      @tailwindcss/postcss7-compat \
      postcss@^7 \
      autoprefixer@^9

Install craco

  npm install @craco/craco

And change the scripts part of package.json:

     "start": "craco start",
     "build": "craco build",
     "test": "craco test",

Create a craco.config.js file:

  // craco.config.js
  module.exports = {
      devServer: {
          watchOptions: {
              ignored: /\.#|node_modules|~$/,
          },
      },
      style: {
          postcss: {
              plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
              ],
          },
      },
  }

Tailwind Configuration

Create a tailwind.config.js:

  // tailwind.config.js
  module.exports = {
      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
          extend: {},
      },
      variants: {
          extend: {},
      },
      plugins: [],
  }

Add a src/index.css file:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

References

  1. https://tailwindcss.com/docs/guides/create-react-app

Read next

Next Post: SQL in Org-Mode
Previous Post: SQLite in the browser

See also

Building static OpenFaas templates

Packaging up the packager

I've been playing with OpenFaaS recently and it's a very accessable way to starting building cloud first services. I wanted to see what I could cram in there, so I built a few templates that would let me host a static site. One that is just html, and another than can be built with something like create-react-app. Static Create the template directory: mkdir -p template/static Then add a template/static/template.

Read more