tailwind-stack/

TailwindFS

Like TailwindCSS, but for fs.readFile().
className your way to file content!

React Server ComponentsRead-OnlyAliases + Direct PathsSecure by Default
<FS className="fs-$readme-lines-1-3" />
renders
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

Syntax Reference

Alias mode — use predefined aliases from config

fs-$alias[-modifiers...]
fs-$alias

Alias from config

-lines-1-10

Line selection

-match-ERROR

Grep pattern

-prop-name

JSON extraction

-col-email

CSV column

as="table"

Render format

Direct path mode — access paths from allowedPaths

fs-$@./path/to/file[-modifiers...]
fs-$@./path

Direct path with @

fs-$@.

Current directory

fs-$@@alias

Escape @ in alias

Security by Default

🔒

Controlled Access

Aliases or allowedPaths globs. No arbitrary paths.

🏠

Project Root Jail

All paths jailed to project root. No escape.

🛡️

Traversal Protection

Paths normalized. ../ attempts blocked.

🚫

Blocked Patterns

.env, .key, .pem blocked by default.

🔗

Symlink Protection

Symlinks resolved and validated.

Direct Paths

Browse any path within allowedPaths using @ prefix

<FS className="fs-$@.-detail" as="table" />
NameSizeModified
.next/-1/26/2026
.turbo/-1/26/2026
app/-1/26/2026
components/-1/26/2026
lib/-1/26/2026
public/-1/26/2026
.gitignore614B1/26/2026
eslint.config.mjs450B1/26/2026
next-env.d.ts247B1/26/2026
next.config.ts169B1/26/2026
package.json1.2KB1/26/2026
postcss.config.mjs90B1/26/2026
README.md1.4KB1/26/2026
seed-auth.ts3.0KB1/26/2026
seed.ts7.4KB1/26/2026
tailwind-crypto.config.ts172B1/26/2026
tailwind-fs.config.ts553B1/26/2026
tailwindauth.db4.0KB1/26/2026
tailwindauth.db-shm32.0KB1/26/2026
tailwindauth.db-wal80.5KB1/26/2026
tsconfig.json613B1/26/2026

Traversal protection, blocked patterns, and symlink checks still apply

HTML Rendering

Render HTML files safely with DOMPurify sanitization

<FS className="fs-$samplehtml" as="html" />

Welcome to TailwindFS

This is a sample HTML file demonstrating the as="html" render mode.

  • Sanitized with DOMPurify
  • Safe for dangerouslySetInnerHTML
  • XSS protection built-in

Server components + HTML rendering = powerful content displays

XSS protection built-in - scripts, event handlers, and dangerous elements stripped

Interactive Playground

Edit the alias, modifiers, and format to see live results

Try:
<FSClient className="fs-$readme-lines-1-10" as="pre" />
Live Result

File Explorer

Available aliases and their file previews

$readmeREADME.md
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started
$packagepackage.json
{
	"name": "@tailwind-stack/landing",
	"version": "0.1.0",
$nextconfignext.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
$srcapp
ai/
api/
auth/
crypto/
env/
fetch/
form/
fs/
qr/
sql/
favicon.ico
globals.css
layout.tsx
page.tsx
$componentscomponents
ai/
auth/
common/
fetch/
form/
fs/
qr/
sql/
$samplepublic/sample.json
{
	"name": "TailwindFS Demo",
	"version": "1.0.0",
$samplecsvpublic/sample.csv
id,name,email,role,active
1,Alice,alice@example.com,admin,true
2,Bob,bob@example.com,user,true
$samplehtmlpublic/sample.html
<article>
  <h1>Welcome to TailwindFS</h1>
  <p>
$logspublic/sample.log
2024-01-15 10:00:00 [INFO] Server started on port 3000
2024-01-15 10:00:05 [DEBUG] Connected to database
2024-01-15 10:00:10 [INFO] Loading configuration...

More Examples

Different ways to read and render file content

README Preview

First 5 lines of README

<FS className="fs-$readme-lines-1-5" as="pre" />
Output
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

Package Name

Extract name from package.json

<FS className="fs-$package-prop-name" />
Output
@tailwind-stack/landing

Grep Errors

Find ERROR lines in logs

<FS className="fs-$logs-match-ERROR-limit-5" as="ul" />
Output
  • 2024-01-15 10:01:23 [ERROR] Failed to fetch user: connection timeout
  • 2024-01-15 10:03:12 [ERROR] Database connection lost
  • 2024-01-15 10:05:30 [ERROR] Invalid token received

CSV as Table

Render CSV data as a table

<FS className="fs-$samplecsv" as="table" />
Output
1id,name,email,role,active
21,Alice,alice@example.com,admin,true
32,Bob,bob@example.com,user,true
43,Charlie,charlie@example.com,user,true
54,Diana,diana@example.com,moderator,true
65,Eve,eve@example.com,user,false
7

Directory Listing

Browse source files with details

<FS className="fs-$src-detail" as="table" />
Output
NameSizeModified
ai/-1/26/2026
api/-1/26/2026
auth/-1/26/2026
crypto/-1/26/2026
env/-1/26/2026
fetch/-1/26/2026
form/-1/26/2026
fs/-1/26/2026
qr/-1/26/2026
sql/-1/26/2026
favicon.ico25.3KB1/26/2026
globals.css517B1/26/2026
layout.tsx649B1/26/2026
page.tsx14.4KB1/26/2026

JSON Extraction

Get nested property from JSON

<FS className="fs-$sample-prop-config--database--host" />
Output
localhost

HTML Rendering

Sanitized HTML with DOMPurify

<FS className="fs-$samplehtml" as="html" />
Output

Welcome to TailwindFS

This is a sample HTML file demonstrating the as="html" render mode.

  • Sanitized with DOMPurify
  • Safe for dangerouslySetInnerHTML
  • XSS protection built-in

Server components + HTML rendering = powerful content displays

How to Use

// tailwind-fs.config.ts
export default {
  // Named aliases
  aliases: { readme: "README.md", logs: "logs/app.log" },
  // Direct path access (optional)
  allowedPaths: ["."],  // "." = project root
}
// In your component
import { FS } from "@tailwind-stack/fs"
// Using alias
<FS className="fs-$readme" as="pre" />
// Using direct path (requires allowedPaths)
<FS className="fs-$@./src" as="table" />
// Grep errors from log
<FS className="fs-$logs-match-ERROR-i-limit-10" as="ul" />