After Following Official Docs Exactly, Tailwind with Gatsby Doesn't Work

What version of Tailwind CSS are you using?

For example: v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss 8.4.16

What version of Node.js are you using?

For example: v16.15.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Ah the classic 30 minute i’ll-do-the-work-for-basic-documentation-failure, but ok here it is:

https://github.com/princefishthrower/gatsby-tailwind-bug

It’s a gatsby ‘hello world’ clone with the steps applied from the official tailwind docs: https://tailwindcss.com/docs/guides/gatsby

Describe your issue

Styles aren’t applied, again, following the official docs with just an <h1> tag:

<h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>

(but I did add text-tahiti for good measure; no change; what do I expect?)

You can clearly see the <h1> rendered does not have an underline and not with tahiti color

Sorry for my grumbly demeanor, this is the fourth library in 4 days (quite literally) that has failed me after following documented steps to the T. It’s getting frustrating.

[adamwathan]

Hey, the instructions work fine, you just didn’t follow them.

You completely missed this step:

…and you created your global.css file in the wrong folder, you put it into src/pages instead of src.

Ah the classic 30 minute i’ll-do-the-work-for-basic-documentation-failure

Zero patience for this sort of bullshit dude. Get a better attitude or get the fuck out of here.

[adamwathan]

Here’s a PR that configures your project as per the documentation:

https://github.com/princefishthrower/gatsby-tailwind-bug/pull/1/files