Tailwind CSS install

Installing Tailwind CSS with Gatsby

I followed my recipe again (not a chef). This information here came from Install Tailwind CSS with Gatsby. I chose not to use @latest as specified. I had used Tailwind CSS before without doing that and it worked. It worked just fine this way. I've actually never used @latest before when installing an npm package and I didn't want to disrupt everything I thought I knew just yet!

Copy
1npm install gatsby-plugin-postcss tailwindcss postcss autoprefixer
2
3# the -p is nice, it also creates the postcss.config.js file!
4npx tailwindcss init -p

You feel a slight draft...

I wanted this post to be draft so I searched for best practice for implementing draft in Gatsby sites. I've seen where you just add draft: true (or false) to frontmatter. I ran into an article by lekoarts, Adding a draft feature to your Gatsby site, that shows how to extend the GraphQL schema so the draft frontmatter is a boolean and defaults to false if it is not supplied. I liked this! GraphQL can know about the frontmatter field even if it has never been used.

But why? Oh yeah, I wanted to add some code that, in my notes, I had used diff. The standard diff for prism-react-renderer loses the syntax highlighting on an inserted or deleted line. I wanted to keep the syntax highlighting! 🎉 So, I made this post draft while I did that! Someday, this post might link to a post on adding draft frontmatter and one on implementing diff syntax highlighting! Someday... 😭

Continuing onward

Add gatsby-plugin-postcss to the array of plugins.

Copy
1module.exports = {
2    /* Your site config here */
3-   plugins: [],
4+   plugins: [`gatsby-plugin-postcss`],
5  }

Remove unused styles during production build for Tailwind.

Copy
1module.exports = {
2-   purge: [],
3+   purge: ["./src/**/*.{js,jsx,ts,tsx}"],
4    darkMode: false, // or 'media' or 'class'
5    theme: {
6      extend: {}
7    },
8    variants: {},
9    plugins: []
10  }

Create the standard Tailwind CSS file. I've created a styles folder for this.

Copy
1@tailwind base;
2@tailwind components;
3@tailwind utilities;

At this point, Tailwind is working and you can use Tailwind CSS classes everywhere. Next step for me was to implement a dark mode that works with Tailwind.

Attributions

Photo by Jason Blackeye (@jeisblack) on Unsplash