Tailwind Config
← Animationsyank.design
Tailwind Config Generator
SCANNING·app/**/*.tsx
0/127
className="bg-[#0a81ff] text-white"
className="text-[17px] leading-[1.4]"
className="rounded-[12px] p-4 md:p-8"
className="bg-[#0a81ff] hover:bg-[#066ee0]"
className="font-medium text-[15px]"
className="grid grid-cols-[1fr_auto_1fr] gap-[24px]"
className="text-[#1d1d1f] bg-[#fafafa]"
className="px-[24px] py-[12px] rounded-[12px]"
className="shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
className="text-[17px] text-[#1d1d1f]"
className="bg-[#0a81ff]/90 backdrop-blur"
className="border border-[#e5e5ea] rounded-[12px]"
className="bg-[#0a81ff] text-white"
className="text-[17px] leading-[1.4]"
className="rounded-[12px] p-4 md:p-8"
className="bg-[#0a81ff] hover:bg-[#066ee0]"
className="font-medium text-[15px]"
className="grid grid-cols-[1fr_auto_1fr] gap-[24px]"
className="text-[#1d1d1f] bg-[#fafafa]"
className="px-[24px] py-[12px] rounded-[12px]"
className="shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
className="text-[17px] text-[#1d1d1f]"
className="bg-[#0a81ff]/90 backdrop-blur"
className="border border-[#e5e5ea] rounded-[12px]"
className="bg-[#0a81ff] text-white"
className="text-[17px] leading-[1.4]"
className="rounded-[12px] p-4 md:p-8"
className="bg-[#0a81ff] hover:bg-[#066ee0]"
className="font-medium text-[15px]"
className="grid grid-cols-[1fr_auto_1fr] gap-[24px]"
className="text-[#1d1d1f] bg-[#fafafa]"
className="px-[24px] py-[12px] rounded-[12px]"
className="shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
className="text-[17px] text-[#1d1d1f]"
className="bg-[#0a81ff]/90 backdrop-blur"
className="border border-[#e5e5ea] rounded-[12px]"
utility classes⚡ arbitrary
unique arbitrary values
dedup
#0a81ff47×→--color-accent
Brand
#066ee012×→--color-accent-hover
Brand
#1d1d1f98×→--color-text
Text
#fafafa64×→--color-surface
Surface
17px34×→--text-md
Type scale
15px22×→--text-sm
Type scale
12px41×→--radius-md
Radius
24px16×→--space-3
Spacing
group → count → name
RECOVERED·tailwind.config.ts
✓ extends
import type { Config } from 'tailwindcss';
export default {
content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
theme: {
extend: {
colors: {
accent: '#0a81ff',
'accent-hover': '#066ee0',
text: '#1d1d1f',
surface: '#fafafa',
},
fontSize: {
sm: '15px',
md: '17px',
},
borderRadius: {
md: '12px',
},
spacing: {
'3': '24px',
},
fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
},
},
},
plugins: [],
} satisfies Config;
127 files · 8 tokens extracted · 0 duplicates left

Tailwind Config

yank scans every utility class in the output codebase, separates arbitrary values like text-[17px] and bg-[#0a81ff] from standard utilities, dedupes them, infers semantic names, and emits a tailwind.config.ts with theme.extend only.