TailwindCrypto

Why import crypto when you can write classes?
className your way to cryptographic utilities!

React Server ComponentsUUIDs + HashingRandom GenerationEncoding

<Crypto className="crypto-uuid" />

renders

6eaa093d-95b0-4b29-a617-2b8f6694e10d

Syntax Reference

<Crypto className="crypto-{operation}[-options...]" [data="..."] />

crypto-uuid

UUID v4/v7

crypto-nanoid-12

Nano ID

crypto-hash

SHA-256/512

crypto-random

Random bytes

crypto-token

Alphanumeric

crypto-otp-6

OTP codes

UUID Generation

UUID v4

Random UUID (default)

<Crypto className="crypto-uuid" />

404a2cd8-681e-4196-bc36-e57e689f7d4d

UUID v7

Timestamp-sortable UUID

<Crypto className="crypto-uuid-v7" />

019bfcb3-d285-79a1-bb31-8e725b6696a2

Nano ID

URL-safe, 21 chars

<Crypto className="crypto-nanoid" />

K8squgtZqpIRHQCZnL8MK

Nano ID (custom length)

12 character Nano ID

<Crypto className="crypto-nanoid-12" />

NtXplVLn7CJL

Hashing

SHA-256

Default hash algorithm

<Crypto className="crypto-hash" data="hello world" />

b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9

SHA-512

Stronger hash

<Crypto className="crypto-hash-sha512" data="hello" />

9b71d224bd62f3785d96d46ad3ea3d73...

Truncated Hash

First 8 characters only

<Crypto className="crypto-hash-sha256-truncate-8" data="test" />

9f86d081

MD5

Legacy hash (not for security)

<Crypto className="crypto-hash-md5" data="hello" />

5d41402abc4b2a76b9719d911017c592

Random Generation

Random Hex

16 bytes as hex (32 chars)

<Crypto className="crypto-random-16" />

f6735ea9d6f5d728fea022b32b1bc115

Random Base64

16 bytes as base64

<Crypto className="crypto-random-16-base64" />

8iVvmhLtOgNw3u+HKCbJrg==

Alphanumeric Token

URL-safe token

<Crypto className="crypto-token-24" />

RGFCggkPV4BmfxQkFS9Fj8m3

OTP Code

6-digit numeric code

<Crypto className="crypto-otp-6" />

519935

Encoding

Base64 Encode

String to base64

<Crypto className="crypto-base64-encode" data="tailwind-stack" />

dGFpbHdpbmQtc3RhY2s=

Base64 Decode

Base64 to string

<Crypto className="crypto-base64-decode" data="dGFpbHdpbmQtc3RhY2s=" />

tailwind-stack

Hex Encode

String to hex

<Crypto className="crypto-hex-encode" data="hello" />

68656c6c6f

URL Encode

URL-safe encoding

<Crypto className="crypto-url-encode" data="hello world" />

hello%20world

Checksums

CRC32

Fast non-cryptographic checksum

<Crypto className="crypto-crc32" data="hello world" />

0d4a1185

Conditionals

UUID Validation

Render children only if value is a valid UUID

<Crypto className="if-crypto-uuid" value={id}>

  <span>Valid UUID!</span>

</Crypto>

550e8400-e29b-41d4-a716-446655440000:Valid UUID

not-a-uuid:Invalid

Render As

Output as different HTML elements

<Crypto className="crypto-uuid" as="code" />

<Crypto className="crypto-uuid" as="hidden" />

as="code":i7o9X9zP

as="hidden":(renders as hidden input)

Class Reference

Class	Description
`crypto-uuid`	UUID v4 (random)
`crypto-uuid-v7`	UUID v7 (timestamp-sortable)
`crypto-nanoid`	Nano ID (21 chars)
`crypto-nanoid-{n}`	Nano ID with custom length
`crypto-hash`	SHA-256 hash (requires data prop)
`crypto-hash-{algo}`	Hash with algorithm (sha256, sha512, md5)
`crypto-hash-{algo}-truncate-{n}`	Truncated hash
`crypto-hmac-{algo}`	HMAC (requires data + secretKey props)
`crypto-random`	32 random bytes (hex)
`crypto-random-{n}`	N random bytes (hex)
`crypto-random-{n}-base64`	Random bytes as base64
`crypto-token-{n}`	Alphanumeric token
`crypto-otp-{n}`	Numeric OTP code
`crypto-base64-encode`	Base64 encode (requires data prop)
`crypto-base64-decode`	Base64 decode (requires data prop)
`crypto-hex-encode`	Hex encode (requires data prop)
`crypto-hex-decode`	Hex decode (requires data prop)
`crypto-url-encode`	URL encode (requires data prop)
`crypto-crc32`	CRC32 checksum (requires data prop)
`if-crypto-uuid`	Conditional: valid UUID (requires value prop)
`if-not-crypto-uuid`	Conditional: invalid UUID (requires value prop)
`if-crypto-hash-match`	Conditional: hash matches (requires data + expected)

How to Use

// tailwind-crypto.config.ts

import type { CryptoUserConfig } from '@tailwind-stack/crypto'

export default {

  uuidVersion: 'v4',

  hashAlgorithm: 'sha256',

  mock: false,

} satisfies CryptoUserConfig

// lib/crypto-config.ts

import { setConfig } from '@tailwind-stack/crypto'

import cryptoConfig from '../tailwind-crypto.config'

setConfig(cryptoConfig)

// In your component

import '@/lib/crypto-config'

import { Crypto } from '@tailwind-stack/crypto'

<Crypto className="crypto-uuid" />

Helper Functions

Use in Server Actions or server-side code:

import { uuid, hash, token, otp } from '@tailwind-stack/crypto'

async function createUser(formData: FormData) {

  'use server'

  const id = uuid() // → '550e8400-...'

  const id7 = uuid('v7') // → '018f3b3c-...'

  const hashed = hash(password, 'sha256')

  const apiKey = token(32)

  const code = otp(6) // → '847293'