tailwind-stack/

TailwindEnv

Like TailwindCSS, but for process.env.
className your way to environment variables!

React Server ComponentsAllowlist SecurityMasked Values
<Env className="env-NODE_ENV" />
renders
production

Syntax Reference

classNameBehavior
env-NODE_ENVOutput value
env-$dbOutput aliased value (hides real var name)
env-PORT-default-3000With fallback value
env-API_KEY-maskedForce masked output
env-prefix-NEXT_PUBLICAll matching vars as object
env-exists-SECRETOutput "true" / "false"
if-env-FEATURE_FLAGRender children if truthy
if-not-env-MAINTENANCERender children if falsy/missing

Live Examples

These are real values from this server's environment

Basic Value

<Env className="env-NODE_ENV" />
production

With Default

<Env className="env-PORT-default-3000" />
3000

Masked Value

<Env className="env-API_KEY-masked" />

Exists Check

<Env className="env-exists-NODE_ENV" />
true

Conditional Render

<Env className="if-env-NODE_ENV">
  <span>Server is running!</span>
</Env>
Server is running!

Aliased Value

<Env className="env-$db" />

$db maps to DATABASE_URL (auto-masked as sensitive)

Prefix PatternNEXT_PUBLIC_*

<Env className="env-prefix-NEXT_PUBLIC_" as="table" />
KeyValue

Config File

Create tailwind-env.config.ts to define your allowlist:

export default {
  vars: {
    NODE_ENV: true,
    $db: 'DATABASE_URL',
    API_KEY: { masked: true }, 
  }, 
  patterns: [
    'NEXT_PUBLIC_*',
    { match: '*_KEY', masked: true }, 
  ],
}

Security Model

Allowlist

Only explicitly configured vars can be accessed. No config = no access.

Aliases

Use $db in className, DATABASE_URL stays hidden in output.

Masking

Sensitive values show only last 4 chars: ••••••••xyz