TailwindCss

Copied from CSS/tailwindcss

yarn add -D tailwindcss autoprefixer cssnano
npx tailwind init tailwind.config.js --full

Create the css file somewhere

@tailwind base;/* Preflight will be injected here */
/*Put all classes here*/
@tailwind components;
@tailwind utilities;

Gatsby Specific

yarn add gatsby-plugin-postcss

gatsby-browser.js

require("./static/css/index.css");

Gatsby-config.js

const tailwindConfig = require("./tailwind.config.js");

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require(`tailwindcss`)(tailwindConfig),
          require(`autoprefixer`),
         ...(process.env.NODE_ENV === `production`
            ? [require(`cssnano`)]
            : []),
        ],
      },
    },

Last updated