{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-font-weight/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"c4f7c8c6-c2e1-5c43-a987-6b56996d39a3","title":"Tailwind CSS Font Weight","slug":"/classes/tailwind-font-weight/"},"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\": \"12 May 2024\",\n  \"title\": \"Tailwind CSS Font Weight\",\n  \"metaTitle\": \"Tailwind Font Weight\",\n  \"metaDescription\": \"The tailwind font weight utility class allows you to easily set the font weight for text elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-font-weight\"\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 Weight\"), mdx(\"p\", null, \"The tailwind font-weight utility class allows you to easily set the font weight for text elements. With Tailwind's font weight classes, you can quickly apply different font weights to your text without writing custom CSS.\"), mdx(\"h2\", null, \"Applying Tailwind Font Weight\"), mdx(\"p\", null, \"To apply a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/\"\n  }, \"font weight\"), \" to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-{weight}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{weight}\"), \"represents the desired font weight. Tailwind CSS provides a set of default font weights that you can use out of the box.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"font-thin\\\">\\n  This text has a thin font weight.\\n</div>\\n<div class=\\\"font-normal\\\">\\n  This text has a normal font weight.\\n</div>\\n<div class=\\\"font-semibold\\\">\\n  This text has a semi-bold font weight.\\n</div>\\n<div class=\\\"font-bold\\\">\\n  This text has a bold font weight.\\n</div>\\n<div class=\\\"font-extrabold\\\">\\n  This text has a extra-bold font weight.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"font-thin text-center text-blue-500\"\n  }, \"This text has a thin font weight.\"), mdx(\"div\", {\n    className: \"font-normal text-center text-blue-500\"\n  }, \"This text has a normal font weight.\"), mdx(\"div\", {\n    className: \"font-semibold text-center text-blue-500\"\n  }, \"This text has a semi-bold font weight.\"), mdx(\"div\", {\n    className: \"font-bold text-center text-blue-500\"\n  }, \"This text has a bold font weight.\"), mdx(\"div\", {\n    className: \"font-extrabold text-center text-blue-500\"\n  }, \"This text has a extra-bold font weight.\")), \"---\", mdx(\"h2\", null, \"Default Tailwind Font Weights\"), mdx(\"p\", null, \"Tailwind CSS includes a set of default font weights that you can use. Some of the commonly used ones include:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-thin\"), \": Sets the font weight to thin.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-normal\"), \": Sets the font weight to normal.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-bold\"), \": Sets the font weight to bold.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-extrabold\"), \": Sets the font weight to extra bold.\"))), mdx(\"p\", null, \"You can choose the font weight that best suits your design and apply the corresponding utility class to your elements.\"), mdx(\"h2\", null, \"Numeric Tailwind Font Weights\"), mdx(\"p\", null, \"In addition to the default font weights, Tailwind CSS also supports numeric font weights. You can specify font weights using numeric values from 100 to 900. For example, you can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-300\"), \" for a lighter font weight and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-700\"), \" for a heavier font weight.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"font-300\\\">\\n  This text has a lighter font weight.\\n</div>\\n\\n<div class=\\\"font-700\\\">\\n  This text has a heavier font weight.\\n</div>\\n\")), mdx(\"h2\", null, \"Hover Font Weight\"), mdx(\"p\", null, \"Hover Font weight is an interactive font weight that changes when an action is performed. In this case, when you hover over a text. To achieve this, you can use the pseudo-class variant \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hover\"), \" before the font weight class.\\nFor example, here is how you can make a text bold when you hover over it.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"font-normal hover:font-bold\\\">Hover over me!</p>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden border-t border-l border-r border-indigo-400 bg-indigo-50 p-4\"\n  }, mdx(\"div\", {\n    className: \"text-center text-indigo-700\"\n  }, mdx(\"a\", {\n    href: \"#\",\n    className: \"font-normal hover:font-bold\",\n    contentEditable: \"false\",\n    style: {\n      \"cursor\": \"pointer\"\n    }\n  }, \" Hover over me!\"))), mdx(\"h2\", null, \"Focus Font Weight\"), mdx(\"p\", null, \"Focus Font weight is an interactive font weight that changes when an action is performed. In this case, when you focus on a text. To achieve this, use the pseudo-class variant \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"focus\"), \" before the font-weight class. For example,\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<input class=\\\"font-normal focus:font-bold\\\" placeholder=\\\"Focus me\\\" />\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden border-t border-l border-r border-indigo-400 bg-indigo-50 p-4\"\n  }, mdx(\"div\", {\n    className: \"max-w-xs w-full mx-auto\"\n  }, mdx(\"input\", {\n    className: \"bg-white font-normal focus:font-bold focus:shadow-outline text-indigo-900 appearance-none inline-block w-full border rounded py-3 px-4 focus:outline-none\",\n    value: \"Focus me\",\n    placeholder: \"Focus me\"\n  }))), mdx(\"h2\", null, \"Responsive Font Weight\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply font weights responsively at different breakpoints. To use responsive tailwind font weight classes, you can append the breakpoint prefix to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font weight\"), \" class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:font-bold\"), \" applies the bold font weight starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"font-normal md:font-bold\\\">\\n  This text has a normal font weight by default, but becomes bold starting from the medium\\n  breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font-normal\"), \" class is applied by default, setting the font weight to normal. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:font-bold)\"), \", the font weight changes to bold.\"), mdx(\"h2\", null, \"Customizing Tailwind Font Weight\"), mdx(\"p\", null, \"Tailwind CSS is highly customizable. If the default font weights don\\u2019t meet your needs, you can customize them in your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js file\"), \". Here\\u2019s an example of how to add a custom font weight:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"module.exports = {\\n  theme: {\\n    extend: {\\n      fontWeight: {\\n        'extra-light': 50,\\n      },\\n    },\\n  },\\n};\\n\")), mdx(\"p\", null, \"Now, you can use font-custom in your project:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"font-extra-light\\\">This is custom weight text.</p>\\n\")), mdx(\"h2\", null, \"Tailwind Font Weight 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  }, \"font-thin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 100;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-extralight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 200;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-light\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 300;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-normal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 400;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-medium\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 500;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-semibold\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 600;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-bold\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 700;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-extrabold\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 800;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-black\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"font-weight: 900;\")))), 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-weight","title":"Tailwind Font Weight","items":[{"url":"#applying-tailwind-font-weight","title":"Applying Tailwind Font Weight"},{"url":"#preview","title":"Preview"},{"url":"#default-tailwind-font-weights","title":"Default Tailwind Font Weights"},{"url":"#numeric-tailwind-font-weights","title":"Numeric Tailwind Font Weights"},{"url":"#hover-font-weight","title":"Hover Font Weight"},{"url":"#preview-1","title":"Preview"},{"url":"#focus-font-weight","title":"Focus Font Weight"},{"url":"#preview-2","title":"Preview"},{"url":"#responsive-font-weight","title":"Responsive Font Weight"},{"url":"#customizing-tailwind-font-weight","title":"Customizing Tailwind Font Weight"},{"url":"#tailwind-font-weight-class-table","title":"Tailwind Font Weight Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-font-weight.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Font Weight","lastUpdated":"12 May 2024","metaDescription":"The tailwind font weight utility class allows you to easily set the font weight for text elements."}}},"pageContext":{"id":"c4f7c8c6-c2e1-5c43-a987-6b56996d39a3"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}