\\nTailwind Font Size Utilities\\n

\\n\\n

text-xs → Extra small text

\\n\\n

text-sm → Small text

\\n\\n

text-base → Default body text

\\n\\n

text-lg → Large text

\\n\\n

text-xl → Extra large text

\\n\\n

\\ntext-2xl → Heading size\\n

\\n\\n

\\ntext-4xl → Large heading\\n

\\n\\n

\\ntext-7xl → Very large display text\\n

\\nTailwind Font Family Utilities\\n

\\n\\n\\n

font-sans

\\n

\\nThis text uses a sans-serif font.\\n

\\n\\n\\n

font-serif

\\n

\\nThis text uses a serif font.\\n

\\n\\n\\n

font-mono

\\n

\\nThis text uses a monospace font.\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"8807b77a-6485-4559-85d0-8a608de20852","type":"divider","props":{},"children":[]},{"id":"ab59d6ee-c943-46ad-a7c9-a290cfa01d2c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"3. Font Weight","styles":{}}],"children":[]},{"id":"3f1b5397-a884-47df-879b-82ad3305030f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Font weight utilities control the ","styles":{}},{"type":"text","text":"thickness or boldness of text","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f7655277-c045-41d3-8237-7adae20062fc","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-thin","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:100","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-light","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:300","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-normal","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:400","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-medium","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:500","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-semibold","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:600","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-bold","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:700","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"font-black","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-weight:900","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"eb6b550b-2d53-4d0d-a2a5-2783ca952981","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind provides several predefined font-weight utilities to quickly adjust text emphasis. ","styles":{}}],"children":[]},{"id":"c1609649-07d0-4856-9c59-e2d6b0096dbc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Example","styles":{}}],"children":[]},{"id":"caf53fd5-ee45-4318-affb-aebc95f82a01","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ed3331f1-8788-4345-a332-0890b1493ff0","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind Font Weight Example\\n\\n\\n\\n\\n\\n\\n\\n

\\nTailwind Font Weight Utilities\\n

\\n\\n

\\nfont-thin → Thin text\\n

\\n\\n

\\nfont-light → Light text\\n

\\n\\n

\\nfont-normal → Normal text\\n

\\n\\n

\\nfont-medium → Medium text\\n

\\n\\n

\\nfont-semibold → Semi-bold text\\n

\\n\\n

\\nfont-bold → Bold text\\n

\\n\\n

\\nfont-black → Extra bold text\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"2166cbd1-19b3-4fe2-afbc-41c101cd90e1","type":"divider","props":{},"children":[]},{"id":"1295ffd3-01f8-4087-9999-9a7cb3e262a6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"4. Text Alignment","styles":{}}],"children":[]},{"id":"4933f92f-2295-4be0-84f8-1b4f07b720e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text alignment utilities control ","styles":{}},{"type":"text","text":"horizontal alignment of text content","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3365f08e-182b-48c1-a777-95b4f78b4b49","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"describe","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"text-left","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-align:left","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"aligns text to the left side of the container.","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"text-center","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-align:center","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"centers text horizontally.","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"text-right","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-align:right","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"aligns text to the right side.","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"text-justify","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-align:justify","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"distributes text evenly across the width of the container.","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"34d140e8-69eb-4667-9b7f-9fcae0d371d1","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind Text Alignment Example\\n\\n\\n\\n\\n\\n\\n\\n

\\nTailwind Text Alignment Utilities\\n

\\n\\n\\n

text-left

\\n

\\nThis paragraph is aligned to the left using the text-left utility.\\n

\\n\\n\\n

text-center

\\n

\\nThis paragraph is centered using the text-center utility.\\n

\\n\\n\\n

text-right

\\n

\\nThis paragraph is aligned to the right using the text-right utility.\\n

\\n\\n\\n

text-justify

\\n

\\nThis paragraph demonstrates justified text. The text spreads evenly\\nacross the container width, creating clean edges on both sides.\\n

🌐 Vanilla

\\n

Edit index.html or styles.css or index.js to get started

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"},{\"id\":\"styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"c146c026-8631-442a-bf50-2465c7ac0535","type":"divider","props":{},"children":[]},{"id":"4f9b842f-4632-4322-bbe8-e58d42ded75b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"6. Letter Spacing — YES (Standard Typography Section)","styles":{}}],"children":[]},{"id":"7ad55614-a241-43bc-8a35-7edafb711f3c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Letter spacing controls the ","styles":{}},{"type":"text","text":"space between characters","styles":{"bold":true}},{"type":"text","text":" in text. In Tailwind it is handled with ","styles":{}},{"type":"text","text":"tracking-*","styles":{"code":true}},{"type":"text","text":" utilities","styles":{"bold":true}},{"type":"text","text":". ","styles":{}}],"children":[]},{"id":"51e99f66-ba67-4ee0-b8d4-9e2f351f0626","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example utilities:","styles":{}}],"children":[]},{"id":"665f4763-6b7f-45bb-a31e-4375fe9e3c96","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"tracking-tight","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"letter-spacing: -0.025em","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"tracking-normal","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"letter-spacing: 0","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"tracking-wide","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"letter-spacing: 0.025em","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"tracking-wider","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"letter-spacing: 0.05em","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"tracking-widest","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"letter-spacing: 0.1em","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"dd6eb88d-2748-473c-9959-faf829bbd2e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"55a29cbe-2958-4d99-9f6e-3c550cce35b7","type":"procode","props":{"code":"

\nThis text has wider letter spacing.\n

","language":"javascript","filename":"","files":"[{\"id\":\"46fvbrp2w\",\"name\":\"code\",\"code\":\"

\\nThis text has wider letter spacing.\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2b8d7f72-3b9f-463c-9641-a6414d8c3f44","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Letter spacing is important because it affects ","styles":{}},{"type":"text","text":"readability, visual rhythm, and heading design","styles":{"bold":true}},{"type":"text","text":". ","styles":{}}],"children":[]},{"id":"fc56acfa-c2a8-4711-9005-c34f91c6ea00","type":"divider","props":{},"children":[]},{"id":"d56ce6f8-5a8d-49be-b2cc-3dba2256eb7b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"7. Word Spacing — Optional in Tailwind Docs","styles":{}}],"children":[]},{"id":"46a7c139-a5b3-46b4-a1a5-de3439fa2263","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Word spacing controls the ","styles":{}},{"type":"text","text":"space between words","styles":{"bold":true}},{"type":"text","text":", using the CSS ","styles":{}},{"type":"text","text":"word-spacing","styles":{"code":true}},{"type":"text","text":" property. ","styles":{}}],"children":[]},{"id":"d66866ae-a077-433e-96e3-b898b8a97be9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example CSS:","styles":{}}],"children":[]},{"id":"0f91f4a0-e6d4-43cd-aa24-99d4f648eac0","type":"procode","props":{"code":"word-spacing: 4px;","language":"javascript","filename":"","files":"[{\"id\":\"cdtzqvk54\",\"name\":\"code\",\"code\":\"word-spacing: 4px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc7c7994-6fb1-45a0-b51f-8e2ec108c048","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"However:","styles":{}}],"children":[]},{"id":"408da684-a028-42f4-9bd2-cb779029b05f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind does not provide built-in ","styles":{"bold":true}},{"type":"text","text":"word-spacing","styles":{"code":true}},{"type":"text","text":" utilities by default","styles":{"bold":true}}],"children":[]},{"id":"4c2d639b-c1c8-4508-a19e-2b3ebdf81f95","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It usually requires ","styles":{}},{"type":"text","text":"custom CSS or arbitrary values","styles":{"bold":true}}],"children":[]},{"id":"60e276cd-f1ac-4fb5-8b46-4cf161a93746","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example in Tailwind:","styles":{}}],"children":[]},{"id":"bcdb4b29-69f6-4061-8a47-a64171363372","type":"procode","props":{"code":"

\nText with larger space between words\n

","language":"javascript","filename":"","files":"[{\"id\":\"yrjfd31h5\",\"name\":\"code\",\"code\":\"

\\nText with larger space between words\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6251e06-394a-44c4-96a3-bb9efddf6ef7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Because of this, many documentation systems ","styles":{}},{"type":"text","text":"focus on letter spacing instead of word spacing","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"c10908d0-c0ec-4930-b7c3-070bf7b734df","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"8. Font Style","styles":{}}],"children":[]},{"id":"2af7e091-765c-45a0-9fc9-0a71d3f8ed56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Font style utilities control italic styling.","styles":{}}],"children":[]},{"id":"9ec11e7b-4b63-4fba-9cc1-843b2854a9f1","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"italic","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-style: italic","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"not-italic","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"font-style: normal","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"bf627ebf-d08f-4115-a179-6fb1d0817145","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind Font Style Example\\n\\n\\n\\n\\n\\n\\n\\n

\\nTailwind Font Style Utilities\\n

\\n\\n\\n

italic

\\n\\n

\\nThis text is italic using the italic utility.\\n

\\n\\n\\n\\n

not-italic

\\n\\n

\\nThis sentence starts italic,\\n\\nbut this part resets the style to normal.\\n\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"b96b6691-d5a0-4535-bdd2-1b30a07b76cf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Text Decoration","styles":{}}],"children":[]},{"id":"1277d506-749d-4b3e-a7b3-6c668773b80f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text decoration utilities control ","styles":{}},{"type":"text","text":"visual decorations applied to text","styles":{"bold":true}},{"type":"text","text":", such as underlines, overlines, or strikethrough lines. These utilities map directly to the CSS ","styles":{}},{"type":"text","text":"text-decoration-line","styles":{"code":true}},{"type":"text","text":" property. ","styles":{}}],"children":[]},{"id":"c7cef979-82e8-4e8d-bc05-ddc35e154c85","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Values","styles":{}}],"children":[]},{"id":"a87effda-27e6-4ffa-8412-4e3cb5e5ed41","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"underline","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-decoration-line: underline","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"overline","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-decoration-line: overline","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"line-through","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-decoration-line: line-through","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"no-underline","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-decoration-line: none","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"1c0fea30-750a-4725-806e-dd52dd065a25","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind allows applying these utilities directly to text elements without writing custom CSS.","styles":{}}],"children":[]},{"id":"53e2e97d-b679-4ba3-822b-f265b6826d9b","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind Text Decoration Example\\n\\n\\n\\n\\n\\n

Text Decoration

\\n\\n

\\nThis text has an underline.\\n

\\n\\n

\\nThis text has an overline.\\n

\\n\\n

\\nThis text has a line through it.\\n

\\n\\n

\\nThis link has no underline.\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"c006fe29-f9b3-4b70-be19-82eccfee1944","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Text Transform","styles":{}}],"children":[]},{"id":"aa9d6a14-91aa-42d4-961e-ca1dd6eabcdd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text transform utilities control ","styles":{}},{"type":"text","text":"how the capitalization of text appears","styles":{"bold":true}},{"type":"text","text":". They correspond to the CSS ","styles":{}},{"type":"text","text":"text-transform","styles":{"code":true}},{"type":"text","text":" property.","styles":{}}],"children":[]},{"id":"3150ce91-bb23-4f2c-b370-8c9d40a4bab0","type":"divider","props":{},"children":[]},{"id":"42a0874f-035c-480a-a748-f728725713e0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Values","styles":{}}],"children":[]},{"id":"00aee6ea-a095-44b2-926f-1c50835a7ea8","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"CSS Equivalent","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"uppercase","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-transform: uppercase","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"lowercase","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-transform: lowercase","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"capitalize","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-transform: capitalize","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"normal-case","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"text-transform: none","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"568ea145-9d6e-40e8-845e-b264e2716906","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"631bb077-486e-495d-8c9b-34f328bfeff7","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind Text Transform Example\\n\\n\\n\\n\\n\\n

\\nText Transform Utilities\\n

\\n\\n

\\nthis text becomes uppercase\\n

\\n\\n

\\nTHIS TEXT BECOMES LOWERCASE\\n

\\n\\n

\\neach word starts with a capital letter\\n

\\n\\n

\\nNormal capitalization remains unchanged.\\n

\\nText Overflow Utilities\\n

\\n\\n

\\n

\\n This is a very long sentence that will be truncated\\n when it exceeds the container width.\\n

\\n

\\n\\n

\\n

\\n This text will display an ellipsis when it overflows.\\n

\\n

\\n\\n

\\n

\\n This text will clip without showing an ellipsis.\\n

\\n