darkdocumentation-focuseddeveloper-friendlysky-blue
Tailwind CSS Colors & Fonts
What colors and fonts does Tailwind CSS use? Utility-first CSS framework. Sky blue, documentation-focused.
Tailwind CSS Color Palette
Primary: #0EA5E9
Primary
#0EA5E9Brand, links
Background
#0F172AMain background
Surface
#1E293BCards, code blocks
Border
#334155Dividers
Text Primary
#F8FAFCHeadings
Text Secondary
#94A3B8Body text
What Font Does Tailwind CSS Use?
Tailwind CSS uses Inter and Inter
Headings
Inter
700google
Body Text
Inter
400google
Code
Fira Code
400google
Spacing & Radius
Spacing Scale
Base: 4px
481216202432404864
Border Radius
Small
4pxMedium
6pxLarge
8pxTailwind CSS Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#0EA5E9',
'background': '#0F172A',
'surface': '#1E293B',
'border': '#334155',
'text-primary': '#F8FAFC',
'text-secondary': '#94A3B8',
},
fontFamily: {
'heading': ['Inter', 'sans-serif'],
'body': ['Inter', 'sans-serif'],
'mono': ['Fira Code', 'sans-serif'],
},
},
},
}Extract Tailwind CSS's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15