CSP - style-src blocking style without unsafe-inline

[joaoguidev]

Hello.

I'm using Remix Vite 2.8.1 and implementing my security headers and the Tailwind styling is been blocked due to style-src directive of CSP (Content-Security-Policy).

How would I implement a nonce to the tailwind inline style?

Below is how im importing the tailwind.css on the root file:

Below is my implementation on the entry.server file:

   responseHeaders.set(
      "Content-Security-Policy",
      `style-src 'nonce-${cspNonce}'; ...

Below is the error that I get alerting me that the style was blocked

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-7b8cef9c-102c-4". Either the 'unsafe-inline' keyword, a hash ('sha256-Ck30d6oiL1'), or a nonce ('nonce-...') is required to enable inline execution.

I don't want to use 'unsafe-inline'

[prests]

Hey, having a similar issue. Wondering if you found a solution?

[sdf1jpf]

Change your tailwind.css import to use Vite explicit URL imports.
import stylesheet from "./tailwind.css?url";

Then add the stylesheet to links export.
export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ];