TailwindFetch

Like TailwindCSS, but for fetch().
className your way to API data!

React Server ComponentsZero ConfigTypeScriptSuspense Ready

<Fetch className="fetch-[...posts/1]-select-title" />

renders

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Syntax Reference

fetch-[url]-select-path.to.data

fetch-[url]

The URL to fetch

-select-path

Dot notation selector

as="table"

Render format

Interactive Playground

Edit the URL, selector, and format to see live results

Try:

URL

Select (optional)

Render As

<FetchClient

  className="fetch-[https://jsonplaceholder.typicode.com/posts/1]-select-title"

  as="span"

/>

Live Result

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

More Examples

Different ways to fetch and render API data

Get Post Title

Fetch a single post title by ID

<Fetch

  className="fetch-[https://jsonplaceholder.typicode.com/posts/1]-select-title"

/>

Output

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Post Comments

Show comments as a list

<Fetch

  className="fetch-[https://jsonplaceholder.typicode.com/posts/1/comments]-select-0.body"

/>

Output

laudantium enim quasi est quidem magnam voluptate ipsam eos tempora quo necessitatibus dolor quam autem quasi reiciendis et nam sapiente accusantium

User List

Display all users in a table

<Fetch

  className="fetch-[https://jsonplaceholder.typicode.com/users?_start=0&_limit=5]"

  as="table"

/>

Output

id	name	username	email	address	phone	website	company
1	Leanne Graham	Bret	Sincere@april.biz	[object Object]	1-770-736-8031 x56442	hildegard.org	[object Object]
2	Ervin Howell	Antonette	Shanna@melissa.tv	[object Object]	010-692-6593 x09125	anastasia.net	[object Object]
3	Clementine Bauch	Samantha	Nathan@yesenia.net	[object Object]	1-463-123-4447	ramiro.info	[object Object]
4	Patricia Lebsack	Karianne	Julianne.OConner@kory.org	[object Object]	493-170-9623 x156	kale.biz	[object Object]
5	Chelsey Dietrich	Kamren	Lucio_Hettinger@annie.ca	[object Object]	(254)954-1289	demarco.info	[object Object]

Album Data

Raw JSON response

<Fetch

  className="fetch-[https://jsonplaceholder.typicode.com/albums?_start=0&_limit=10]"

  as="json"

/>

Output

[
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  },
  {
    "userId": 1,
    "id": 5,
    "title": "eaque aut omnis a"
  },
  {
    "userId": 1,
    "id": 6,
    "title": "natus impedit quibusdam illo est"
  },
  {
    "userId": 1,
    "id": 7,
    "title": "quibusdam autem aliquid et et quia"
  },
  {
    "userId": 1,
    "id": 8,
    "title": "qui fuga est a eum"
  },
  {
    "userId": 1,
    "id": 9,
    "title": "saepe unde necessitatibus rem"
  },
  {
    "userId": 1,
    "id": 10,
    "title": "distinctio laborum qui"
  }
]

Component Integrations

Pass fetch data to children using $$response tokens

QRGenerate from API Data

Fetch user data and generate QR from their website URL

<Fetch className="fetch-[.../users/1]">

  <QR className="qr-encode-[$$response.website]" />

</Fetch>

Output

TextInject into className

Access nested data via dot notation

<Fetch className="fetch-[.../users/1]">

  <span className="font-bold $$response.name" />

</Fetch>

Output

<span className="font-bold text-lg Leanne Graham" />

Token Syntax

Token	Result
`$$response`	Full response (stringified if object)
`$$response.name`	Nested property access
`$$response.users[0].id`	Array index access

Server vs Client

RSCFetch (Server)

Fetches on the server. Zero client JS. SEO friendly.

import { Fetch } from '@tailwind-stack/fetch'

<Fetch className="fetch-[url]" />

ClientFetchClient

Fetches in browser with Suspense. Shows loading state.

'use client'

import { FetchClient } from '@tailwind-stack/fetch'

<FetchClient className="fetch-[url]" loader={...} />