How to apply a nonce to Tailwind inline styling?

[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'

[87Hz]

How about setting style-src: 'unsafe_inline' for dev mode only? As in production, tailwind will build a pure CSS file which should be hosted either locally or CDN (in that case, self or CDN_URL will do).

[Santhosh-Hanabi]

i am using CDN script with nonce but it is still throwing Inline style error in production