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.
Quick fetch
Stable, immutable URL. CORS-enabled. No auth.
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
min: 4.4 KB · /v1/tailwind-colors.min.json
- CSV 5.0 KB
/v1/tailwind-colors.csv
- TypeScript 7.0 KB
/v1/tailwind-colors.ts
export const tailwindColors
type TailwindColor = (typeof tailwindColors)[number]
Schema
Each record in the dataset has the following shape.
| 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.
Fetch examples
Drop-in snippets in five languages.
curl -sSL https://staticdata.dev/v1/tailwind-colors.json | jq '.[0]' 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]); 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]) 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])
} 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.