[{"data":1,"prerenderedAt":864},["ShallowReactive",2],{"i-ic:sharp-monitor":3,"i-ic:sharp-mail":8,"i-fa6-brands:github":10,"i-fa6-brands:linkedin":14,"i-fa6-brands:telegram":17,"blog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss\u002Fposition":4,"\u002Fblog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss":19,"i-openmoji:flag-united-kingdom":855,"i-ic:sharp-arrow-back-ios":858,"i-ic:sharp-arrow-forward-ios":860,"i-mdi-light:clipboard":862},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M22 3H2v15h5l-1 1v2h12v-2l-1-1h5zm-2 13H4V5h16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M22 4H2v16h20zm-2 4l-8 5l-8-5V6l8 5l8-5z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":13},496,512,"\u003Cpath fill=\"currentColor\" d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2\"\u002F>",{"left":4,"top":4,"width":15,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":16},448,"\u003Cpath fill=\"currentColor\" d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":18},"\u003Cpath fill=\"currentColor\" d=\"M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248s248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3c-3.476 18.584-10.322 24.816-16.948 25.425c-14.4 1.326-25.338-9.517-39.287-18.661c-21.827-14.308-34.158-23.215-55.346-37.177c-24.485-16.135-8.612-25 5.342-39.5c3.652-3.793 67.107-61.51 68.335-66.746c.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142q-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123c-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7q108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789c2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716a43.8 43.8 0 0 1 .417 9.769\"\u002F>",{"id":20,"title":21,"body":22,"date":831,"description":832,"draft":6,"extension":833,"image":834,"lang":835,"meta":836,"navigation":325,"path":837,"seo":838,"stem":839,"tags":840,"__hash__":844,"before":845,"after":850},"blog\u002Fblog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss.md","How to use Nuxt Typography with TailwindCSS",{"type":23,"value":24,"toc":821},"minimark",[25,29,41,56,61,81,246,249,253,256,259,264,267,489,496,565,572,578,638,642,645,737,740,744,747,803,814,817],[26,27,21],"h1",{"id":28},"how-to-use-nuxt-typography-with-tailwindcss",[30,31,32,33,40],"p",{},"TailwindCSS is a great CSS framework, loved by many developers. And also it has ",[34,35,39],"a",{"href":36,"rel":37},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftypography-plugin",[38],"nofollow","a typography plugin",", which is very useful for creating beautiful and readable text.",[30,42,43,44,49,50,55],{},"Unfortunately, CSS is not enough to describe complex elements like codeblock with copy button. Here is where ",[34,45,48],{"href":46,"rel":47},"https:\u002F\u002Ftypography.nuxt.space\u002F",[38],"Nuxt typography"," goes. It is set of typography elements for ",[34,51,54],{"href":52,"rel":53},"https:\u002F\u002Fcontent.nuxtjs.org\u002F",[38],"Nuxt content",".",[57,58,60],"h2",{"id":59},"problems-of-nuxt-typography-configuration","Problems of Nuxt typography configuration",[30,62,63,64,69,70,75,76,80],{},"Nuxt typography is implemented on base of ",[34,65,68],{"href":66,"rel":67},"https:\u002F\u002Fgithub.com\u002FTahul\u002Fpinceau",[38],"pinceau",", so it can be ",[34,71,74],{"href":72,"rel":73},"https:\u002F\u002Ftypography.nuxt.space\u002F#configuration",[38],"conveniently configured"," via ",[77,78,79],"code",{},"tokens.config.ts"," file. For example:",[82,83,88],"pre",{"className":84,"code":85,"filename":79,"language":86,"meta":87,"style":87},"language-ts shiki shiki-themes github-light one-dark-pro","import { defineTheme } from 'pinceau'\nexport default defineTheme({\n  typography: {\n    \u002F\u002F This will change the general line-break size\n    letterSpacings: {\n      tight: '-0.035em',\n      wide: '0.035em'\n    },\n  },\n  prose: {\n    \u002F\u002F This will change the fontSize of the `\u003CProseH1>` component\n    h1: {\n      fontSize: '{typography.2xl.fontSize}'\n    }\n  }\n})\n","ts","",[77,89,90,117,133,142,149,157,172,183,189,195,203,209,217,228,234,240],{"__ignoreMap":87},[91,92,95,99,103,107,110,113],"span",{"class":93,"line":94},"line",1,[91,96,98],{"class":97},"sudEI","import",[91,100,102],{"class":101},"sXDFC"," { ",[91,104,106],{"class":105},"s33T6","defineTheme",[91,108,109],{"class":101}," } ",[91,111,112],{"class":97},"from",[91,114,116],{"class":115},"sDOtg"," 'pinceau'\n",[91,118,120,123,126,130],{"class":93,"line":119},2,[91,121,122],{"class":97},"export",[91,124,125],{"class":97}," default",[91,127,129],{"class":128},"sotTb"," defineTheme",[91,131,132],{"class":101},"({\n",[91,134,136,139],{"class":93,"line":135},3,[91,137,138],{"class":105},"  typography",[91,140,141],{"class":101},": {\n",[91,143,145],{"class":93,"line":144},4,[91,146,148],{"class":147},"s91Lf","    \u002F\u002F This will change the general line-break size\n",[91,150,152,155],{"class":93,"line":151},5,[91,153,154],{"class":105},"    letterSpacings",[91,156,141],{"class":101},[91,158,160,163,166,169],{"class":93,"line":159},6,[91,161,162],{"class":105},"      tight",[91,164,165],{"class":101},": ",[91,167,168],{"class":115},"'-0.035em'",[91,170,171],{"class":101},",\n",[91,173,175,178,180],{"class":93,"line":174},7,[91,176,177],{"class":105},"      wide",[91,179,165],{"class":101},[91,181,182],{"class":115},"'0.035em'\n",[91,184,186],{"class":93,"line":185},8,[91,187,188],{"class":101},"    },\n",[91,190,192],{"class":93,"line":191},9,[91,193,194],{"class":101},"  },\n",[91,196,198,201],{"class":93,"line":197},10,[91,199,200],{"class":105},"  prose",[91,202,141],{"class":101},[91,204,206],{"class":93,"line":205},11,[91,207,208],{"class":147},"    \u002F\u002F This will change the fontSize of the `\u003CProseH1>` component\n",[91,210,212,215],{"class":93,"line":211},12,[91,213,214],{"class":105},"    h1",[91,216,141],{"class":101},[91,218,220,223,225],{"class":93,"line":219},13,[91,221,222],{"class":105},"      fontSize",[91,224,165],{"class":101},[91,226,227],{"class":115},"'{typography.2xl.fontSize}'\n",[91,229,231],{"class":93,"line":230},14,[91,232,233],{"class":101},"    }\n",[91,235,237],{"class":93,"line":236},15,[91,238,239],{"class":101},"  }\n",[91,241,243],{"class":93,"line":242},16,[91,244,245],{"class":101},"})\n",[30,247,248],{},"But it is not possible to use TailwindCSS classes or values in this configuration file.",[57,250,252],{"id":251},"solution","Solution",[30,254,255],{},"Technically all these values are stored as CSS variables in result. So you can make these variables point to other CSS variables, which are defined in TailwindCSS.",[30,257,258],{},"In my case I want to change fonts in typography. Let's see an example.",[260,261,263],"h3",{"id":262},"step-1-create-tailwindcss-plugin","Step 1: Create TailwindCSS plugin",[30,265,266],{},"First of all we need to create custom plugin for TailwindCSS. It will define CSS variables for fonts.",[82,268,273],{"className":269,"code":270,"filename":271,"language":272,"meta":87,"style":87},"language-js shiki shiki-themes github-light one-dark-pro","\u002F\u002F Import function for creating plugin\n\u002F** @type {import('tailwindcss\u002Fplugin')} *\u002F\nconst plugin = require('tailwindcss\u002Fplugin')\n\nmodule.exports = plugin(function ({ \n    \u002F\u002F Function for adding utilities\n    addUtilities, \n    \u002F\u002F Function for getting values from current TailwindCSS theme\n    theme \n  }) {\n  addUtilities({\n    \u002F\u002F Create utility class with required variables\n    '.nuxt-typography-connector': {\n      \u002F\u002F Define your CSS variables\n      '--tw-typography-font-sans': theme('fontFamily.sans'),\n      '--tw-typography-font-serif': theme('fontFamily.serif'),\n      '--tw-typography-font-mono': theme('fontFamily.mono'),\n      '--tw-typography-font-dialog': theme('fontFamily.dialog')\n    }\n  })\n})\n","nuxt-typography.js","js",[77,274,275,280,296,321,327,349,354,363,368,376,381,388,393,400,405,423,439,456,473,478,484],{"__ignoreMap":87},[91,276,277],{"class":93,"line":94},[91,278,279],{"class":147},"\u002F\u002F Import function for creating plugin\n",[91,281,282,285,289,293],{"class":93,"line":119},[91,283,284],{"class":147},"\u002F** ",[91,286,288],{"class":287},"sHKR0","@type",[91,290,292],{"class":291},"sL_tp"," {import('tailwindcss\u002Fplugin')}",[91,294,295],{"class":147}," *\u002F\n",[91,297,298,301,305,309,312,315,318],{"class":93,"line":135},[91,299,300],{"class":97},"const",[91,302,304],{"class":303},"sZ6H1"," plugin",[91,306,308],{"class":307},"su5p0"," =",[91,310,311],{"class":128}," require",[91,313,314],{"class":101},"(",[91,316,317],{"class":115},"'tailwindcss\u002Fplugin'",[91,319,320],{"class":101},")\n",[91,322,323],{"class":93,"line":144},[91,324,326],{"emptyLinePlaceholder":325},true,"\n",[91,328,329,332,334,337,339,341,343,346],{"class":93,"line":151},[91,330,331],{"class":303},"module",[91,333,55],{"class":101},[91,335,336],{"class":303},"exports",[91,338,308],{"class":307},[91,340,304],{"class":128},[91,342,314],{"class":101},[91,344,345],{"class":97},"function",[91,347,348],{"class":101}," ({ \n",[91,350,351],{"class":93,"line":159},[91,352,353],{"class":147},"    \u002F\u002F Function for adding utilities\n",[91,355,356,360],{"class":93,"line":174},[91,357,359],{"class":358},"sagcK","    addUtilities",[91,361,362],{"class":101},", \n",[91,364,365],{"class":93,"line":185},[91,366,367],{"class":147},"    \u002F\u002F Function for getting values from current TailwindCSS theme\n",[91,369,370,373],{"class":93,"line":191},[91,371,372],{"class":358},"    theme",[91,374,375],{"class":101}," \n",[91,377,378],{"class":93,"line":197},[91,379,380],{"class":101},"  }) {\n",[91,382,383,386],{"class":93,"line":205},[91,384,385],{"class":128},"  addUtilities",[91,387,132],{"class":101},[91,389,390],{"class":93,"line":211},[91,391,392],{"class":147},"    \u002F\u002F Create utility class with required variables\n",[91,394,395,398],{"class":93,"line":219},[91,396,397],{"class":115},"    '.nuxt-typography-connector'",[91,399,141],{"class":101},[91,401,402],{"class":93,"line":230},[91,403,404],{"class":147},"      \u002F\u002F Define your CSS variables\n",[91,406,407,410,412,415,417,420],{"class":93,"line":236},[91,408,409],{"class":115},"      '--tw-typography-font-sans'",[91,411,165],{"class":101},[91,413,414],{"class":128},"theme",[91,416,314],{"class":101},[91,418,419],{"class":115},"'fontFamily.sans'",[91,421,422],{"class":101},"),\n",[91,424,425,428,430,432,434,437],{"class":93,"line":242},[91,426,427],{"class":115},"      '--tw-typography-font-serif'",[91,429,165],{"class":101},[91,431,414],{"class":128},[91,433,314],{"class":101},[91,435,436],{"class":115},"'fontFamily.serif'",[91,438,422],{"class":101},[91,440,442,445,447,449,451,454],{"class":93,"line":441},17,[91,443,444],{"class":115},"      '--tw-typography-font-mono'",[91,446,165],{"class":101},[91,448,414],{"class":128},[91,450,314],{"class":101},[91,452,453],{"class":115},"'fontFamily.mono'",[91,455,422],{"class":101},[91,457,459,462,464,466,468,471],{"class":93,"line":458},18,[91,460,461],{"class":115},"      '--tw-typography-font-dialog'",[91,463,165],{"class":101},[91,465,414],{"class":128},[91,467,314],{"class":101},[91,469,470],{"class":115},"'fontFamily.dialog'",[91,472,320],{"class":101},[91,474,476],{"class":93,"line":475},19,[91,477,233],{"class":101},[91,479,481],{"class":93,"line":480},20,[91,482,483],{"class":101},"  })\n",[91,485,487],{"class":93,"line":486},21,[91,488,245],{"class":101},[30,490,491,492,495],{},"Don't forget to add this plugin to your ",[77,493,494],{},"tailwind.config.js",":",[82,497,499],{"className":269,"code":498,"filename":494,"language":272,"meta":87,"style":87},"\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  \u002F\u002F ...\n  plugins: [\n    \u002F\u002F ...\n    require('.\u002Fnuxt-typography.js')\n  ]\n}\n",[77,500,501,512,525,530,538,543,555,560],{"__ignoreMap":87},[91,502,503,505,507,510],{"class":93,"line":94},[91,504,284],{"class":147},[91,506,288],{"class":287},[91,508,509],{"class":291}," {import('tailwindcss').Config}",[91,511,295],{"class":147},[91,513,514,516,518,520,522],{"class":93,"line":119},[91,515,331],{"class":303},[91,517,55],{"class":101},[91,519,336],{"class":303},[91,521,308],{"class":307},[91,523,524],{"class":101}," {\n",[91,526,527],{"class":93,"line":135},[91,528,529],{"class":147},"  \u002F\u002F ...\n",[91,531,532,535],{"class":93,"line":144},[91,533,534],{"class":105},"  plugins",[91,536,537],{"class":101},": [\n",[91,539,540],{"class":93,"line":151},[91,541,542],{"class":147},"    \u002F\u002F ...\n",[91,544,545,548,550,553],{"class":93,"line":159},[91,546,547],{"class":128},"    require",[91,549,314],{"class":101},[91,551,552],{"class":115},"'.\u002Fnuxt-typography.js'",[91,554,320],{"class":101},[91,556,557],{"class":93,"line":174},[91,558,559],{"class":101},"  ]\n",[91,561,562],{"class":93,"line":185},[91,563,564],{"class":101},"}\n",[260,566,568,569],{"id":567},"step-2-use-created-utility-class-on-root","Step 2: Use created utility class on ",[77,570,571],{},":root",[30,573,574,575,577],{},"Now we need to use created utility class on ",[77,576,571],{}," element. It will make CSS variables available for all elements on page.",[82,579,584],{"className":580,"code":581,"filename":582,"language":583,"meta":87,"style":87},"language-css shiki shiki-themes github-light one-dark-pro","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n  @apply nuxt-typography-connector;\n}\n","tailwind.css","css",[77,585,586,594,601,608,612,619,634],{"__ignoreMap":87},[91,587,588,591],{"class":93,"line":94},[91,589,590],{"class":97},"@tailwind",[91,592,593],{"class":101}," base;\n",[91,595,596,598],{"class":93,"line":119},[91,597,590],{"class":97},[91,599,600],{"class":101}," components;\n",[91,602,603,605],{"class":93,"line":135},[91,604,590],{"class":97},[91,606,607],{"class":101}," utilities;\n",[91,609,610],{"class":93,"line":144},[91,611,326],{"emptyLinePlaceholder":325},[91,613,614,617],{"class":93,"line":151},[91,615,571],{"class":616},"s6xyn",[91,618,524],{"class":101},[91,620,621,624,628,631],{"class":93,"line":159},[91,622,623],{"class":101},"  @",[91,625,627],{"class":626},"s-t5L","apply",[91,629,630],{"class":626}," nuxt-typography-connector",[91,632,633],{"class":101},";\n",[91,635,636],{"class":93,"line":174},[91,637,564],{"class":101},[260,639,641],{"id":640},"step-3-use-css-variables-in-nuxt-typography-configuration","Step 3: Use CSS variables in Nuxt typography configuration",[30,643,644],{},"Now we can use CSS variables in Nuxt typography configuration:",[82,646,648],{"className":84,"code":647,"filename":79,"language":86,"meta":87,"style":87},"import { defineTheme } from 'pinceau'\n\nexport default defineTheme({\n  typography: {\n    font: {\n      body: 'var(--tw-typography-font-serif)',\n      code: 'var(--tw-typography-font-mono)',\n      display: 'var(--tw-typography-font-serif)'\n    }\n  }\n})\n",[77,649,650,664,668,678,684,691,703,715,725,729,733],{"__ignoreMap":87},[91,651,652,654,656,658,660,662],{"class":93,"line":94},[91,653,98],{"class":97},[91,655,102],{"class":101},[91,657,106],{"class":105},[91,659,109],{"class":101},[91,661,112],{"class":97},[91,663,116],{"class":115},[91,665,666],{"class":93,"line":119},[91,667,326],{"emptyLinePlaceholder":325},[91,669,670,672,674,676],{"class":93,"line":135},[91,671,122],{"class":97},[91,673,125],{"class":97},[91,675,129],{"class":128},[91,677,132],{"class":101},[91,679,680,682],{"class":93,"line":144},[91,681,138],{"class":105},[91,683,141],{"class":101},[91,685,686,689],{"class":93,"line":151},[91,687,688],{"class":105},"    font",[91,690,141],{"class":101},[91,692,693,696,698,701],{"class":93,"line":159},[91,694,695],{"class":105},"      body",[91,697,165],{"class":101},[91,699,700],{"class":115},"'var(--tw-typography-font-serif)'",[91,702,171],{"class":101},[91,704,705,708,710,713],{"class":93,"line":174},[91,706,707],{"class":105},"      code",[91,709,165],{"class":101},[91,711,712],{"class":115},"'var(--tw-typography-font-mono)'",[91,714,171],{"class":101},[91,716,717,720,722],{"class":93,"line":185},[91,718,719],{"class":105},"      display",[91,721,165],{"class":101},[91,723,724],{"class":115},"'var(--tw-typography-font-serif)'\n",[91,726,727],{"class":93,"line":191},[91,728,233],{"class":101},[91,730,731],{"class":93,"line":197},[91,732,239],{"class":101},[91,734,735],{"class":93,"line":205},[91,736,245],{"class":101},[30,738,739],{},"Done! Now your typography will use fonts from TailwindCSS.",[57,741,743],{"id":742},"how-to-do-that-without-plugin","How to do that without plugin",[30,745,746],{},"If you don't want to create plugin for TailwindCSS, you can apply style to content, which will override existing fonts with TailwindCSS ones:",[82,748,750],{"className":580,"code":749,"language":583,"meta":87,"style":87},".blog-fonts {\n  @apply [&_p]:!font-sans [&_a]:!font-sans [&_em]:!font-sans [&_li]:!font-sans\n         [&_ul]:!font-sans [&_ol]:!font-sans [&_blockquote]:!font-sans\n         [&_strong]:!font-sans [&_del]:!font-sans [&_hr]:!font-sans\n         [&_table]:!font-sans [&_thead]:!font-sans [&_tbody]:!font-sans [&_tr]:!font-sans\n         [&_th]:!font-sans [&_td]:!font-sans [&_sup]:!font-sans [&_sub]:!font-sans\n         [&_h1]:!font-sans [&_h2]:!font-sans [&_h3]:!font-sans [&_h4]:!font-sans [&_h5]:!font-sans [&_h6]:!font-sans;\n}\n",[77,751,752,760,774,779,784,789,794,799],{"__ignoreMap":87},[91,753,754,758],{"class":93,"line":94},[91,755,757],{"class":756},"sbyA6",".blog-fonts",[91,759,524],{"class":101},[91,761,762,764,766,769,771],{"class":93,"line":119},[91,763,623],{"class":101},[91,765,627],{"class":626},[91,767,768],{"class":101}," [&_",[91,770,30],{"class":626},[91,772,773],{"class":101},"]:!font-sans [&_a]:!font-sans [&_em]:!font-sans [&_li]:!font-sans\n",[91,775,776],{"class":93,"line":135},[91,777,778],{"class":101},"         [&_ul]:!font-sans [&_ol]:!font-sans [&_blockquote]:!font-sans\n",[91,780,781],{"class":93,"line":144},[91,782,783],{"class":101},"         [&_strong]:!font-sans [&_del]:!font-sans [&_hr]:!font-sans\n",[91,785,786],{"class":93,"line":151},[91,787,788],{"class":101},"         [&_table]:!font-sans [&_thead]:!font-sans [&_tbody]:!font-sans [&_tr]:!font-sans\n",[91,790,791],{"class":93,"line":159},[91,792,793],{"class":101},"         [&_th]:!font-sans [&_td]:!font-sans [&_sup]:!font-sans [&_sub]:!font-sans\n",[91,795,796],{"class":93,"line":174},[91,797,798],{"class":101},"         [&_h1]:!font-sans [&_h2]:!font-sans [&_h3]:!font-sans [&_h4]:!font-sans [&_h5]:!font-sans [&_h6]:!font-sans;\n",[91,800,801],{"class":93,"line":185},[91,802,564],{"class":101},[804,805,807],"alert",{"type":806},"info",[30,808,809,810,813],{},"You should apply styles with ",[77,811,812],{},"!important",". In other case it won't work.",[30,815,816],{},"It is not very convenient, but it works. Choose configs for Nuxt typography carefully, because it is not easy to change them later.",[818,819,820],"style",{},"html pre.shiki code .sudEI, html code.shiki .sudEI{--shiki-default:#D73A49;--shiki-dark:#C678DD}html pre.shiki code .sXDFC, html code.shiki .sXDFC{--shiki-default:#24292E;--shiki-dark:#ABB2BF}html pre.shiki code .s33T6, html code.shiki .s33T6{--shiki-default:#24292E;--shiki-dark:#E06C75}html pre.shiki code .sDOtg, html code.shiki .sDOtg{--shiki-default:#032F62;--shiki-dark:#98C379}html pre.shiki code .sotTb, html code.shiki .sotTb{--shiki-default:#6F42C1;--shiki-dark:#61AFEF}html pre.shiki code .s91Lf, html code.shiki .s91Lf{--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHKR0, html code.shiki .sHKR0{--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:italic}html pre.shiki code .sL_tp, html code.shiki .sL_tp{--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#E5C07B;--shiki-dark-font-style:italic}html pre.shiki code .sZ6H1, html code.shiki .sZ6H1{--shiki-default:#005CC5;--shiki-dark:#E5C07B}html pre.shiki code .su5p0, html code.shiki .su5p0{--shiki-default:#D73A49;--shiki-dark:#56B6C2}html pre.shiki code .sagcK, html code.shiki .sagcK{--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic}html pre.shiki code .s6xyn, html code.shiki .s6xyn{--shiki-default:#6F42C1;--shiki-dark:#56B6C2}html pre.shiki code .s-t5L, html code.shiki .s-t5L{--shiki-default:#005CC5;--shiki-dark:#ABB2BF}html pre.shiki code .sbyA6, html code.shiki .sbyA6{--shiki-default:#6F42C1;--shiki-dark:#D19A66}",{"title":87,"searchDepth":119,"depth":119,"links":822},[823,824,830],{"id":59,"depth":119,"text":60},{"id":251,"depth":119,"text":252,"children":825},[826,827,829],{"id":262,"depth":135,"text":263},{"id":567,"depth":135,"text":828},"Step 2: Use created utility class on :root",{"id":640,"depth":135,"text":641},{"id":742,"depth":119,"text":743},"2023-05-09","Small hack to use Nuxt Typography with TailwindCSS","md",null,"en",{},"\u002Fblog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss",{"title":21,"description":832},"blog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss",[841,842,843],"Frontend","Nuxt.js","TailwindCSS","8iyily0FMRFE8e4ZMzgtjDnD2LzDJM-jUv5UwEKgit4",{"title":846,"path":847,"stem":848,"description":849,"children":-1},"Personal website building journey","\u002Fblog\u002F2023-05-08-personal-website-journey","blog\u002F2023-05-08-personal-website-journey","Here is my experience building several versions of my personal website throughout the years.",{"title":851,"path":852,"stem":853,"description":854,"children":-1},"Taming the Chaos: Building a Custom File Format Toolkit","\u002Fblog\u002F2025-02-19-taming-the-chaos","blog\u002F2025-02-19-taming-the-chaos","How I built a toolkit for a custom file format. Which difficulties I faced and how I solved them.",{"left":4,"top":4,"width":856,"height":856,"rotate":4,"vFlip":6,"hFlip":6,"body":857},72,"\u003Cpath fill=\"#1e50a0\" d=\"M5 17h62v38H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M40 28.856V32h10.181L67 21.691V17h-7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 17h-3.827L40 31.203V32h3.482L67 17.586z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M59.347 55H67v-4.692L50.182 40H40v3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 55v-2.347L46.355 40h-4.787l24.474 15z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M32 43.144V40H21.819L5 50.309V55h7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 55h3.827L32 40.797V40h-3.482L5 54.414z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M12.653 17H5v4.692L21.818 32H32v-3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 17v2.347L25.646 32h4.786L5.958 17z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M5 31h62v10H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M31 17h10v38H31z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 33h62v6H5z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M33 17h6v38h-6z\"\u002F>\u003Cpath fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 17h62v38H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":859},"\u003Cpath fill=\"currentColor\" d=\"M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":861},"\u003Cpath fill=\"currentColor\" d=\"M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":863},"\u003Cpath fill=\"currentColor\" d=\"M6 5h2.5a3 3 0 0 1 3-3a3 3 0 0 1 3 3H17a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-1v3H7V6zm2 2h7V6H8zm3.5-5a2 2 0 0 0-2 2h4a2 2 0 0 0-2-2\"\u002F>",1787506838185]