staticdata.dev
Menu
Datasets About Contact

Tailwind Colors

The default Tailwind CSS color palette as published in the framework's `defaultTheme.colors` export, with each named color mapped to its 50, 100, 200, …, 900, 950 shades. Useful for design tokens, theme builders, color pickers, and any tool that needs to present the Tailwind palette without depending on Tailwind itself.

v1.0.0 MIT 22 records Updated 2026-04-25 stable Source:  Tailwind CSS default theme

Quick fetch

Stable, immutable URL. CORS-enabled. No auth.

bash
curl https://staticdata.dev/v1/tailwind-colors.json

Or use as a typed import: import { tailwindColors } from "https://staticdata.dev/v1/tailwind-colors.ts"

Formats

  • JSON 6.7 KB

    /v1/tailwind-colors.json

    Open

    min: 4.4 KB · /v1/tailwind-colors.min.json

  • CSV 5.0 KB

    /v1/tailwind-colors.csv

    Open
  • TypeScript 7.0 KB

    /v1/tailwind-colors.ts

    export const tailwindColors

    type TailwindColor = (typeof tailwindColors)[number]

    Open

Schema

Each record in the dataset has the following shape.

Schema
Field Type Description Example
name string Color name as used in Tailwind class names slate
shades Record<string, string> Map of shade key (50, 100, …, 950) to hex color

Preview

First 10 records.

Data preview
name
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime

Showing 10 of 22. View full data:  JSON · CSV

Fetch examples

Drop-in snippets in five languages.

curl
curl -sSL https://staticdata.dev/v1/tailwind-colors.json | jq '.[0]'
JavaScript
import type { TailwindColor } from "https://staticdata.dev/v1/tailwind-colors.ts";

const res = await fetch("https://staticdata.dev/v1/tailwind-colors.min.json");
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
const tailwindColors: TailwindColor[] = await res.json();
console.log(tailwindColors[0]);
Python
import urllib.request, json

with urllib.request.urlopen("https://staticdata.dev/v1/tailwind-colors.min.json") as r:
    tailwindColors = json.load(r)

print(tailwindColors[0])
Go
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

func main() {
	resp, err := http.Get("https://staticdata.dev/v1/tailwind-colors.min.json")
	if err != nil { panic(err) }
	defer resp.Body.Close()

	var data []map[string]any
	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
		panic(err)
	}
	fmt.Println(data[0])
}
Rust
use serde_json::Value;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let body = ureq::get("https://staticdata.dev/v1/tailwind-colors.min.json").call()?.into_string()?;
    let data: Vec<Value> = serde_json::from_str(&body)?;
    println!("{:?}", data.first());
    Ok(())
}

Sources and methodology

The dataset reflects the palette as of the most recent Tailwind CSS release at build time. Tailwind’s color values do change occasionally; the version field is bumped when a refresh is published.

Each color object always contains the same set of keys: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. This shape was unified in Tailwind v3.3; older versions did not include 950.

Hex values are lowercase 6-digit (#rrggbb), no alpha channel. Convert to RGB or HSL at the consumer.

For non-default colors (custom palettes, the deprecated colors lightBlue/warmGray/trueGray/coolGray/blueGray from earlier Tailwind versions, or third-party packages), this dataset is not authoritative.

Versioning

URLs under /v1/ are immutable. The data they return will not change in a way that breaks consumers. Schema-incompatible updates ship under a new version path. See the tailwind-colors changelog for this dataset's history.