CSS isn't loaded in gatsby build state

[dedow]

Description

I use tailwinds in project
If I command gatsby develop, the css work well
but if I command gastby build and run gatsby serve the css wasn't loaded

Steps to reproduce

I did step by step from https://www.gatsbyjs.com/docs/tailwind-css/, https://www.jerriepelser.com/blog/using-tailwind-with-gatsby/

You can clone my code from https://github.com/dedow/gatsby

Expected result

CSS loaded in production (gastby build && gatsby serve)

Actual result

CSS only loaded in development (gatsby develop), but it isn't loaded after build

Environment

System:
OS: Windows 10 10.0.19041
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Binaries:
Node: 15.0.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.9.0
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.58)
npmPackages:
gatsby: ^2.24.63 => 2.25.0
gatsby-plugin-postcss: ^3.0.1 => 3.0.4
gatsby-plugin-typography: ^2.5.11 => 2.5.13

[hamishtaplin]

Same here

[vladar]

I confirm that the tailwind CSS is not included in the build for some reason. Maybe tailwind purges all the styles or style-loader skips the import in gatsby-browser somehow.

This warrants additional investigation.

P.S. We are working on unifying the behavior in build and develop. Check out #25729

Also, can track progress is at #27432

[dedow]

I found to solution

Because I init the project with this example "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript"

This example project contain "sideEffects": false in packages.json

If I remove "sideEffects": false, CSS will be loaded

[vladar]

Thank you for reporting a fix @dedow

I am closing this issue but please feel free to comment and mention me if you would like to continue this discussion.