{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-font-size/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ca631e38-24fe-571a-8a4c-7fe32a8944fe","title":"Tailwind CSS Font size","slug":"/classes/tailwind-font-size/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"8 May 2024\",\n  \"title\": \"Tailwind CSS Font size\",\n  \"metaTitle\": \"Tailwind Font size\",\n  \"metaDescription\": \"The Tailwind font size utility class allows you to easily adjust the size of text elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-font-size\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Font size\"), mdx(\"p\", null, \"The Tailwind font size utility class allows you to easily adjust the size of text elements. It provides a set of classes that enable you to specify font sizes using predefined sizes or custom values, giving you control over the typography in your web applications.\"), mdx(\"h2\", null, \"Predefined Tailwind Font Sizes\"), mdx(\"p\", null, \"Tailwind CSS provides a range of predefined font sizes that you can apply to text elements. These tailwind font sizes are denoted by a numeric scale, ranging from 1 to 9, where 1 represents the smallest font size and 9 represents the largest font size.\"), mdx(\"p\", null, \"To apply a predefined font size, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-{size}\"), \" class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" is the desired font size scale. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div>\\n  <p class=\\\"text-sm... \\\">\\n    The font-size is semibold\\n  </p>\\n  <p class=\\\"text-xl...\\\">\\n    The font-size is extra large\\n  </p>\\n  <p class=\\\"text-4xl...\\\">\\n    The font-size is 4 extra large\\n  </p>\\n  <p class=\\\"text-6xl...\\\">\\n    The font-size is 6 extra large\\n  </p>\\n  <p class=\\\"text-8xl...\\\">\\n    The font-size is 8 extra large\\n  </p>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-emerald-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"flex items-start\"\n  }, mdx(\"div\", {\n    className: \"text-sm font-medium text-emerald-500 \"\n  }, \" Let write some more codes\")), mdx(\"div\", {\n    className: \"flex items-start\"\n  }, mdx(\"div\", {\n    className: \"text-xl font-medium text-emerald-500 \"\n  }, \" Let write some more codes\")), mdx(\"div\", {\n    className: \"flex items-start\"\n  }, mdx(\"div\", {\n    className: \"text-4xl font-medium text-emerald-500 \"\n  }, \" Let write some more codes\")), mdx(\"div\", {\n    className: \"flex items-start\"\n  }, mdx(\"div\", {\n    className: \"text-6xl font-medium text-emerald-500 \"\n  }, \" Let write some more codes\")), mdx(\"div\", {\n    className: \"flex items-start\"\n  }, mdx(\"div\", {\n    className: \"text-8xl font-medium text-emerald-500 \"\n  }, \" Let write some more codes\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Custom Tailwind Font Sizes\"), mdx(\"p\", null, \"Tailwind CSS also allows you to define custom font sizes using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-{size}\"), \" class. Instead of using the predefined scales, you can specify your own font size value.\"), mdx(\"p\", null, \"To apply a custom tailwind font size, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-{size}\"), \" class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" is a valid CSS font size value. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-18\\\">\\n  This is a paragraph with a custom font size.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-18\"), \" class is applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<p>\"), \" element, setting the font size to 18 pixels.\"), mdx(\"h2\", null, \"Responsive Tailwind Font Sizes\"), mdx(\"p\", null, \"Tailwind CSS provides responsive utility classes for font sizes, allowing you to adjust the tailwind font size at different breakpoints. To use responsive tailwind font size classes, you can append the breakpoint prefix to the font size classes. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:text-2xl\"), \" sets the font size to extra large starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"text-base md:text-2xl\\\">\\n  This is a paragraph with a responsive font size.\\n</p>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-base\"), \" class is applied by default, setting the tailwind font size based on the base font size. However, starting from the medium breakpoint and above, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:text-2xl\"), \" class is applied, changing the tailwind font size to extra large.\"), mdx(\"h2\", null, \"Relative Tailwind Font Sizes\"), mdx(\"p\", null, \"Tailwind CSS also provides utility classes for applying relative font sizes. You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-sm\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-lg\"), \", and other similar classes to adjust the font size relative to the parent element's font size. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"text-lg\\\">\\n  This is a paragraph with a font size larger than the default.\\n</p>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-lg\"), \" class is applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<p>\"), \" element, setting the tailwind font size to be larger than the default font size.\"), mdx(\"h2\", null, \"Tailwind Font Size Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-xs\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 0.75rem;,\", mdx(\"br\", null), \"line-height: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-sm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 0.875rem;\", mdx(\"br\", null), \"line-height: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-base\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 1rem;\", mdx(\"br\", null), \"line-height: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-lg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 1.125rem;\", mdx(\"br\", null), \"line-height: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 1.25rem;\", mdx(\"br\", null), \"line-height: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-2xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 1.5rem;\", mdx(\"br\", null), \"line-height: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-3xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 1.875rem;\", mdx(\"br\", null), \"line-height: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-4xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 2.25rem;\", mdx(\"br\", null), \"line-height: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-5xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 3rem;\", mdx(\"br\", null), \"line-height: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-6xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 3.75rem;\", mdx(\"br\", null), \"line-height: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-7xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 4.5rem;\", mdx(\"br\", null), \"line-height: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-8xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 6rem;\", mdx(\"br\", null), \"line-height: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-9xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-size: 8rem;\", mdx(\"br\", null), \"line-height: 1;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header17\"\n  }, \"Landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-font-size","title":"Tailwind Font size","items":[{"url":"#predefined-tailwind-font-sizes","title":"Predefined Tailwind Font Sizes"},{"url":"#preview","title":"Preview"},{"url":"#custom-tailwind-font-sizes","title":"Custom Tailwind Font Sizes"},{"url":"#responsive-tailwind-font-sizes","title":"Responsive Tailwind Font Sizes"},{"url":"#relative-tailwind-font-sizes","title":"Relative Tailwind Font Sizes"},{"url":"#tailwind-font-size-class-table","title":"Tailwind Font Size Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-font-size.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Font size","lastUpdated":"8 May 2024","metaDescription":"The Tailwind font size utility class allows you to easily adjust the size of text elements."}}},"pageContext":{"id":"ca631e38-24fe-571a-8a4c-7fe32a8944fe"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}