[{"data":1,"prerenderedAt":250},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":225,"doc-page-nav":245},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":220,"_id":221,"_source":222,"_file":223,"_extension":224},"/documentation/tailwindcss/fonts","tailwindcss",false,"","Fonts",{"type":11,"children":12,"toc":217},"root",[13,211],{"type":14,"tag":15,"props":16,"children":19},"element","doc-component-demo",{":code":17,":dark":17,"title":18},"false","Customizing fonts",[20,67,72,89,96,119,134,161,174,186,199],{"type":14,"tag":21,"props":22,"children":23},"p",{},[24,27,34,36,42,44,50,51,57,59,65],{"type":25,"value":26},"text","In addition to the default ",{"type":14,"tag":28,"props":29,"children":31},"code",{"className":30},[],[32],{"type":25,"value":33},"sans",{"type":25,"value":35}," and ",{"type":14,"tag":28,"props":37,"children":39},{"className":38},[],[40],{"type":25,"value":41},"mono",{"type":25,"value":43}," fonts, Tairo defines ",{"type":14,"tag":28,"props":45,"children":47},{"className":46},[],[48],{"type":25,"value":49},"heading",{"type":25,"value":35},{"type":14,"tag":28,"props":52,"children":54},{"className":53},[],[55],{"type":25,"value":56},"alt",{"type":25,"value":58}," fonts to allow you to create more unique designs. By default, we use predefined system fonts from Tailwind CSS but you can easily change them by editing the ",{"type":14,"tag":28,"props":60,"children":62},{"className":61},[],[63],{"type":25,"value":64},"tailwind.config.ts",{"type":25,"value":66}," file.",{"type":14,"tag":21,"props":68,"children":69},{},[70],{"type":25,"value":71},"As an example, this demo uses a custom set of fonts:",{"type":14,"tag":73,"props":74,"children":75},"code-group",{},[76],{"type":14,"tag":77,"props":78,"children":84},"pre",{"className":79,"code":81,"filename":82,"language":83,"meta":8},[80],"language-ts","import { withShurikenUI } from '@shuriken-ui/tailwind'\n\nexport default withShurikenUI({\n  theme: {\n    // Note that we do not use the `extend` key here\n    fontFamily: {\n      sans: ['Inter Variable', 'sans-serif'],\n      heading: ['Inter Variable', 'sans-serif'],\n      alt: ['Karla Variable', 'sans-serif'],\n      mono: ['Fira Code Variable', 'mono'],\n    },\n  },\n  content: [],\n})\n",".demo/tailwind.config.ts","ts",[85],{"type":14,"tag":28,"props":86,"children":87},{"__ignoreMap":8},[88],{"type":25,"value":81},{"type":14,"tag":90,"props":91,"children":95},"doc-heading",{"className":92,"label":94},[93],"mb-4","Loading fonts",[],{"type":14,"tag":21,"props":97,"children":98},{},[99,101,107,109,117],{"type":25,"value":100},"Defining a font in tailwind does not load the font for you. You need to load the font by yourself.\nYou can load fonts using ",{"type":14,"tag":28,"props":102,"children":104},{"className":103},[],[105],{"type":25,"value":106},"@fontsource",{"type":25,"value":108}," packages, you can browse the list of available fonts on ",{"type":14,"tag":110,"props":111,"children":115},"a",{"href":112,"rel":113},"https://fontsource.org/",[114],"nofollow",[116],{"type":25,"value":112},{"type":25,"value":118},", then install the package using pnpm:",{"type":14,"tag":73,"props":120,"children":121},{},[122],{"type":14,"tag":77,"props":123,"children":129},{"className":124,"code":126,"filename":127,"language":128,"meta":8},[125],"language-bash","pnpm --filter=app add --dev @fontsource-variable/open-sans\n","Terminal","bash",[130],{"type":14,"tag":28,"props":131,"children":132},{"__ignoreMap":8},[133],{"type":25,"value":126},{"type":14,"tag":135,"props":136,"children":139},"doc-message",{"color":137,"icon":138},"muted-contrast","ph:info",[140],{"type":14,"tag":21,"props":141,"children":142},{},[143,145,151,153,159],{"type":25,"value":144},"The ",{"type":14,"tag":28,"props":146,"children":148},{"className":147},[],[149],{"type":25,"value":150},"--filter",{"type":25,"value":152}," flag is used to install the package only in the ",{"type":14,"tag":28,"props":154,"children":156},{"className":155},[],[157],{"type":25,"value":158},".app",{"type":25,"value":160}," project.",{"type":14,"tag":21,"props":162,"children":163},{},[164,166,172],{"type":25,"value":165},"Then import the font in your ",{"type":14,"tag":28,"props":167,"children":169},{"className":168},[],[170],{"type":25,"value":171},"\u003Capp>/nuxt.config.ts",{"type":25,"value":173}," file:",{"type":14,"tag":73,"props":175,"children":176},{},[177],{"type":14,"tag":77,"props":178,"children":181},{"className":179,"code":180,"filename":171,"language":83,"meta":8},[80],"export default defineNuxtConfig({\n  css: [\n    // ...\n    '@fontsource-variable/open-sans/index.css',\n    // ...\n  ],\n})\n",[182],{"type":14,"tag":28,"props":183,"children":184},{"__ignoreMap":8},[185],{"type":25,"value":180},{"type":14,"tag":21,"props":187,"children":188},{},[189,191,197],{"type":25,"value":190},"Now you can update your ",{"type":14,"tag":28,"props":192,"children":194},{"className":193},[],[195],{"type":25,"value":196},"\u003Capp>/tailwind.config.ts",{"type":25,"value":198}," file to use the font:",{"type":14,"tag":73,"props":200,"children":201},{},[202],{"type":14,"tag":77,"props":203,"children":206},{"className":204,"code":205,"filename":196,"language":83,"meta":8},[80],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport defaultTheme from 'tailwindcss/defaultTheme'\n\nexport default withShurikenUI({\n  theme: {\n    // Note that we do not use the `extend` key here\n    fontFamily: {\n      sans: ['Open Sans Variable', 'sans-serif'],\n      heading: ['Open Sans Variable', 'sans-serif'],\n      alt: ['Karla Variable', 'sans-serif'],\n      mono: defaultTheme.fontFamily.mono,\n    },\n  },\n})\n",[207],{"type":14,"tag":28,"props":208,"children":209},{"__ignoreMap":8},[210],{"type":25,"value":205},{"type":14,"tag":212,"props":213,"children":216},"doc-nav",{"next":214,"prev":215},"/documentation/tailwindcss/tooltip","/documentation/tailwindcss/colors",[],{"title":8,"searchDepth":218,"depth":218,"links":219},2,[],"markdown","content:documentation:30.tailwindcss:5.fonts.md","content","documentation/30.tailwindcss/5.fonts.md","md",[226,232,239],{"_path":227,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":228,"description":8,"toc":229,"_type":220,"_id":230,"_source":222,"_file":231,"_extension":224},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":233,"_dir":6,"_draft":7,"_partial":229,"_locale":8,"title":234,"_id":235,"_type":236,"_source":222,"_file":237,"_extension":238},"/documentation/tailwindcss/_dir","Tailwind CSS","content:documentation:30.tailwindcss:_dir.yml","yaml","documentation/30.tailwindcss/_dir.yml","yml",{"_path":240,"_dir":241,"_draft":7,"_partial":7,"_locale":8,"title":242,"description":8,"_type":220,"_id":243,"_source":222,"_file":244,"_extension":224},"/documentation/tailwindcss","documentation","Tailwind, and Tairo","content:documentation:30.tailwindcss:1.index.md","documentation/30.tailwindcss/1.index.md",[246,248],{"_path":215,"title":247},"Colors",{"_path":214,"title":249},"Tooltip",1779173508831]