404 page with tailwind css

[ChrisCrossCrash]

I'm using Gatsby with Tailwind CSS. I'm having a problem where the Tailwind styles are being applied to the development 404 page:

As you can see, the problem is that Tailwind removes all of the default styles. Headings, buttons, and paragraphs all look the same.

The tailwind styles are applied in global.css:

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

It doesn't matter if I rename the css file. The development 404 page applies whatever styles I have imported in index.js.

Is there any to prevent these Tailwind styles from being applied to the development 404 page? It's not such a big deal, but it would be nice to make it a little prettier.

[ramojej]

That page is not the default 404 page.. Click on the "Preview custom 404 page".

[ChrisCrossCrash]

Yes, I know that. That's why if you read my question it says "Is there any to prevent these Tailwind styles from being applied to the development 404 page?"

[robclancy]

FYI to disable the dev 404 completely you can do this in gastby-node.js

exports.onCreatePage = ({ page, actions: { deletePage } }) => {
  if (page.path === '/dev-404-page/') {
    deletePage(page)
  }
}

[robclancy]

And just found you can make your own page to override it.

pages/dev-404-page.tsx.

I copy pasted the default and made it work with tailwind. https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js

[ChrisCrossCrash]

I'm not using Gatsby anymore but if it works as you say it does then that's the answer I was looking for. Thanks!

[pmagictech]

For me, I just tried to style back the elements used on the page. I choose tailwind classes that will style them close to the default style. Here is my global.css.

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

h1 {
  @apply font-bold text-3xl my-6;
}

h2 {
  @apply font-bold text-2xl my-5;
}

button, [type='submit'] {
  @apply border border-neutral-500 px-2 py-1 bg-neutral-200;
}

input {
  @apply border border-neutral-500 px-2 py-1;
}

p, pre {
  @apply my-4;
}

Here is what it looks like.