[{"data":1,"prerenderedAt":1550},["ShallowReactive",2],{"\u002Fblog\u002F2022\u002Fstyling-the-details-tag-with-tailwind-and-vue":3},{"id":4,"title":5,"body":6,"date":1538,"description":1539,"draft":1540,"extension":1541,"meta":1542,"navigation":305,"path":1543,"seo":1544,"stem":1545,"summary":1546,"tags":1547,"__hash__":1549},"blog\u002Fblog\u002F2022\u002F01.styling-the-details-tag-with-tailwind-and-vue.md","Styling the details tag with Tailwind and Vue",{"type":7,"value":8,"toc":1525},"minimark",[9,14,21,41,44,47,50,54,68,71,145,148,159,165,232,235,239,242,500,504,507,689,698,703,706,825,829,844,865,874,883,887,892,896,903,929,936,940,943,968,973,1003,1009,1127,1130,1177,1180,1256,1259,1516,1519,1522],[10,11,13],"h2",{"id":12},"introduction","Introduction",[15,16,17],"blockquote",{},[18,19,20],"p",{},"Requires a basic understanding of html, vue and tailwindcss.",[18,22,23,24,28,29,32,33,36,37,40],{},"It turns out that the default styling of the ",[25,26,27],"code",{},"\u003Cdetails>"," tag is prety ugly because of this,\nmost people just decide not to use it and fallback to ",[25,30,31],{},"divs",", ",[25,34,35],{},"h1"," and ",[25,38,39],{},"ul"," with some kind\nof state management to support it.",[18,42,43],{},"It basically looks plain when closed, and barely better when open.",[18,45,46],{},"But with Tailwind and a bit of vue magic, we can do much better.",[18,48,49],{},"With no time to waste, let's get started.",[10,51,53],{"id":52},"project-structure","Project Structure",[18,55,56,57,60,61,60,64,67],{},"To incorporate this with your vue website, you will need not to start a new ",[25,58,59],{},"npm"," or ",[25,62,63],{},"yarn",[25,65,66],{},"pnpm"," vue app.",[18,69,70],{},"I personally used pnpm and vite for this project",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpx create-vite .\npnpm install .\npnpm install tailwindcss autoprefixer postcss\ntailwindcss init -p\npnpm run dev\n","bash","",[25,79,80,96,106,122,134],{"__ignoreMap":77},[81,82,85,89,93],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"sBMFI","pnpx",[81,90,92],{"class":91},"sfazB"," create-vite",[81,94,95],{"class":91}," .\n",[81,97,99,101,104],{"class":83,"line":98},2,[81,100,66],{"class":87},[81,102,103],{"class":91}," install",[81,105,95],{"class":91},[81,107,109,111,113,116,119],{"class":83,"line":108},3,[81,110,66],{"class":87},[81,112,103],{"class":91},[81,114,115],{"class":91}," tailwindcss",[81,117,118],{"class":91}," autoprefixer",[81,120,121],{"class":91}," postcss\n",[81,123,125,128,131],{"class":83,"line":124},4,[81,126,127],{"class":87},"tailwindcss",[81,129,130],{"class":91}," init",[81,132,133],{"class":91}," -p\n",[81,135,137,139,142],{"class":83,"line":136},5,[81,138,66],{"class":87},[81,140,141],{"class":91}," run",[81,143,144],{"class":91}," dev\n",[18,146,147],{},"All you need is your component file and tailwindcss enabled.",[18,149,150,151,158],{},"For best results, Add a vector library you like. But in this project, I will be using ",[152,153,157],"a",{"href":154,"rel":155},"https:\u002F\u002Ffontawesome.com",[156],"nofollow","font-awesome",".",[18,160,161,162],{},"I included the vector library by adding this script tag to the ",[25,163,164],{},"index.html",[72,166,170],{"className":167,"code":168,"language":169,"meta":77,"style":77},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    \u003Cscript defer src=\"https:\u002F\u002Fuse.fontawesome.com\u002Freleases\u002Fv5.15.4\u002Fjs\u002Fall.js\" integrity=\"sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc\" crossorigin=\"anonymous\">\u003C\u002Fscript>\n","html",[25,171,172],{"__ignoreMap":77},[81,173,174,178,182,186,189,192,195,198,200,203,205,207,210,212,215,217,219,222,224,227,229],{"class":83,"line":84},[81,175,177],{"class":176},"sMK4o","    \u003C",[81,179,181],{"class":180},"swJcz","script",[81,183,185],{"class":184},"spNyl"," defer",[81,187,188],{"class":184}," src",[81,190,191],{"class":176},"=",[81,193,194],{"class":176},"\"",[81,196,197],{"class":91},"https:\u002F\u002Fuse.fontawesome.com\u002Freleases\u002Fv5.15.4\u002Fjs\u002Fall.js",[81,199,194],{"class":176},[81,201,202],{"class":184}," integrity",[81,204,191],{"class":176},[81,206,194],{"class":176},[81,208,209],{"class":91},"sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc",[81,211,194],{"class":176},[81,213,214],{"class":184}," crossorigin",[81,216,191],{"class":176},[81,218,194],{"class":176},[81,220,221],{"class":91},"anonymous",[81,223,194],{"class":176},[81,225,226],{"class":176},">\u003C\u002F",[81,228,181],{"class":180},[81,230,231],{"class":176},">\n",[18,233,234],{},"Don't forget to import the index.css file into your main.js file.",[10,236,238],{"id":237},"appvue","App.vue",[18,240,241],{},"Nothing much here. Just basic imports and data declaration.",[72,243,245],{"className":167,"code":244,"language":169,"meta":77,"style":77},"\u003Ctemplate>\n  \u003Ccustom-details :title=\"heading\" :data=\"tools\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport CustomDetails from '.\u002Fcomponents\u002Fcustom-details.vue';\nexport default {\n  components: { CustomDetails },\n  data(){\n    return {\n      heading: \"Tools for building a website\",\n      tools: [\"HTML\", \"CSS\", \"JavaScript\", \"VueJS\", \"ReactJS\", \"Vite\"]\n    }\n  }\n}\n\u003C\u002Fscript>\n",[25,246,247,257,292,301,307,315,341,353,370,379,387,406,473,479,485,491],{"__ignoreMap":77},[81,248,249,252,255],{"class":83,"line":84},[81,250,251],{"class":176},"\u003C",[81,253,254],{"class":180},"template",[81,256,231],{"class":176},[81,258,259,262,265,268,270,272,275,277,280,282,284,287,289],{"class":83,"line":98},[81,260,261],{"class":176},"  \u003C",[81,263,264],{"class":180},"custom-details",[81,266,267],{"class":184}," :title",[81,269,191],{"class":176},[81,271,194],{"class":176},[81,273,274],{"class":91},"heading",[81,276,194],{"class":176},[81,278,279],{"class":184}," :data",[81,281,191],{"class":176},[81,283,194],{"class":176},[81,285,286],{"class":91},"tools",[81,288,194],{"class":176},[81,290,291],{"class":176}," \u002F>\n",[81,293,294,297,299],{"class":83,"line":108},[81,295,296],{"class":176},"\u003C\u002F",[81,298,254],{"class":180},[81,300,231],{"class":176},[81,302,303],{"class":83,"line":124},[81,304,306],{"emptyLinePlaceholder":305},true,"\n",[81,308,309,311,313],{"class":83,"line":136},[81,310,251],{"class":176},[81,312,181],{"class":180},[81,314,231],{"class":176},[81,316,318,322,326,329,332,335,338],{"class":83,"line":317},6,[81,319,321],{"class":320},"s7zQu","import",[81,323,325],{"class":324},"sTEyZ"," CustomDetails ",[81,327,328],{"class":320},"from",[81,330,331],{"class":176}," '",[81,333,334],{"class":91},".\u002Fcomponents\u002Fcustom-details.vue",[81,336,337],{"class":176},"'",[81,339,340],{"class":176},";\n",[81,342,344,347,350],{"class":83,"line":343},7,[81,345,346],{"class":320},"export",[81,348,349],{"class":320}," default",[81,351,352],{"class":176}," {\n",[81,354,356,359,362,365,367],{"class":83,"line":355},8,[81,357,358],{"class":180},"  components",[81,360,361],{"class":176},":",[81,363,364],{"class":176}," {",[81,366,325],{"class":324},[81,368,369],{"class":176},"},\n",[81,371,373,376],{"class":83,"line":372},9,[81,374,375],{"class":180},"  data",[81,377,378],{"class":176},"(){\n",[81,380,382,385],{"class":83,"line":381},10,[81,383,384],{"class":320},"    return",[81,386,352],{"class":176},[81,388,390,393,395,398,401,403],{"class":83,"line":389},11,[81,391,392],{"class":180},"      heading",[81,394,361],{"class":176},[81,396,397],{"class":176}," \"",[81,399,400],{"class":91},"Tools for building a website",[81,402,194],{"class":176},[81,404,405],{"class":176},",\n",[81,407,409,412,414,417,419,422,424,427,429,432,434,436,438,441,443,445,447,450,452,454,456,459,461,463,465,468,470],{"class":83,"line":408},12,[81,410,411],{"class":180},"      tools",[81,413,361],{"class":176},[81,415,416],{"class":180}," [",[81,418,194],{"class":176},[81,420,421],{"class":91},"HTML",[81,423,194],{"class":176},[81,425,426],{"class":176},",",[81,428,397],{"class":176},[81,430,431],{"class":91},"CSS",[81,433,194],{"class":176},[81,435,426],{"class":176},[81,437,397],{"class":176},[81,439,440],{"class":91},"JavaScript",[81,442,194],{"class":176},[81,444,426],{"class":176},[81,446,397],{"class":176},[81,448,449],{"class":91},"VueJS",[81,451,194],{"class":176},[81,453,426],{"class":176},[81,455,397],{"class":176},[81,457,458],{"class":91},"ReactJS",[81,460,194],{"class":176},[81,462,426],{"class":176},[81,464,397],{"class":176},[81,466,467],{"class":91},"Vite",[81,469,194],{"class":176},[81,471,472],{"class":180},"]\n",[81,474,476],{"class":83,"line":475},13,[81,477,478],{"class":176},"    }\n",[81,480,482],{"class":83,"line":481},14,[81,483,484],{"class":176},"  }\n",[81,486,488],{"class":83,"line":487},15,[81,489,490],{"class":176},"}\n",[81,492,494,496,498],{"class":83,"line":493},16,[81,495,296],{"class":176},[81,497,181],{"class":180},[81,499,231],{"class":176},[10,501,503],{"id":502},"custom-details-component","custom-details component",[18,505,506],{},"In out custom details component, lets write down some templates.",[72,508,510],{"className":167,"code":509,"language":169,"meta":77,"style":77},"\u003Ctemplate>\n  \u003Cdetails>\n    \u003Csummary>\n      \u003Cdiv>\n        \u003Ch2> {{title}} \u003C\u002Fh2>\n        \u003Ci class=\"fa fa-caret-down\">\u003C\u002Fi>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsummary>\n    \u003Cul>\n      \u003Cli v-for=\"(detail, index) in detailData\" :key=\"index\">\n        {{ detail }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdetails>\n\u003C\u002Ftemplate>\n",[25,511,512,520,529,538,548,567,592,601,610,618,651,656,664,672,681],{"__ignoreMap":77},[81,513,514,516,518],{"class":83,"line":84},[81,515,251],{"class":176},[81,517,254],{"class":180},[81,519,231],{"class":176},[81,521,522,524,527],{"class":83,"line":98},[81,523,261],{"class":176},[81,525,526],{"class":180},"details",[81,528,231],{"class":176},[81,530,531,533,536],{"class":83,"line":108},[81,532,177],{"class":176},[81,534,535],{"class":180},"summary",[81,537,231],{"class":176},[81,539,540,543,546],{"class":83,"line":124},[81,541,542],{"class":176},"      \u003C",[81,544,545],{"class":180},"div",[81,547,231],{"class":176},[81,549,550,553,555,558,561,563,565],{"class":83,"line":136},[81,551,552],{"class":176},"        \u003C",[81,554,10],{"class":180},[81,556,557],{"class":176},">",[81,559,560],{"class":324}," {{title}} ",[81,562,296],{"class":176},[81,564,10],{"class":180},[81,566,231],{"class":176},[81,568,569,571,574,577,579,581,584,586,588,590],{"class":83,"line":317},[81,570,552],{"class":176},[81,572,573],{"class":180},"i",[81,575,576],{"class":184}," class",[81,578,191],{"class":176},[81,580,194],{"class":176},[81,582,583],{"class":91},"fa fa-caret-down",[81,585,194],{"class":176},[81,587,226],{"class":176},[81,589,573],{"class":180},[81,591,231],{"class":176},[81,593,594,597,599],{"class":83,"line":343},[81,595,596],{"class":176},"      \u003C\u002F",[81,598,545],{"class":180},[81,600,231],{"class":176},[81,602,603,606,608],{"class":83,"line":355},[81,604,605],{"class":176},"    \u003C\u002F",[81,607,535],{"class":180},[81,609,231],{"class":176},[81,611,612,614,616],{"class":83,"line":372},[81,613,177],{"class":176},[81,615,39],{"class":180},[81,617,231],{"class":176},[81,619,620,622,625,628,630,632,635,637,640,642,644,647,649],{"class":83,"line":381},[81,621,542],{"class":176},[81,623,624],{"class":180},"li",[81,626,627],{"class":184}," v-for",[81,629,191],{"class":176},[81,631,194],{"class":176},[81,633,634],{"class":91},"(detail, index) in detailData",[81,636,194],{"class":176},[81,638,639],{"class":184}," :key",[81,641,191],{"class":176},[81,643,194],{"class":176},[81,645,646],{"class":91},"index",[81,648,194],{"class":176},[81,650,231],{"class":176},[81,652,653],{"class":83,"line":389},[81,654,655],{"class":324},"        {{ detail }}\n",[81,657,658,660,662],{"class":83,"line":408},[81,659,596],{"class":176},[81,661,624],{"class":180},[81,663,231],{"class":176},[81,665,666,668,670],{"class":83,"line":475},[81,667,605],{"class":176},[81,669,39],{"class":180},[81,671,231],{"class":176},[81,673,674,677,679],{"class":83,"line":481},[81,675,676],{"class":176},"  \u003C\u002F",[81,678,526],{"class":180},[81,680,231],{"class":176},[81,682,683,685,687],{"class":83,"line":487},[81,684,296],{"class":176},[81,686,254],{"class":180},[81,688,231],{"class":176},[15,690,691],{},[18,692,693,694,697],{},"In this template, no style is being added to it to keep it readable and easy to modify. All styles will be written in the ",[25,695,696],{},"styles"," tag.",[699,700,702],"h3",{"id":701},"time-to-add-some-functionality","Time to add some functionality",[18,704,705],{},"In our script tag,",[72,707,709],{"className":167,"code":708,"language":169,"meta":77,"style":77},"\u003Cscript>\nexport default {\n  props: [\"title\", \"data\"],\n  data(){\n    return {\n      detailData: this.data instanceof Array ? [...this.data] : []\n    }\n  }\n}\n\u003C\u002Fscript>\n",[25,710,711,719,727,757,763,769,805,809,813,817],{"__ignoreMap":77},[81,712,713,715,717],{"class":83,"line":84},[81,714,251],{"class":176},[81,716,181],{"class":180},[81,718,231],{"class":176},[81,720,721,723,725],{"class":83,"line":98},[81,722,346],{"class":320},[81,724,349],{"class":320},[81,726,352],{"class":176},[81,728,729,732,734,736,738,741,743,745,747,750,752,755],{"class":83,"line":108},[81,730,731],{"class":180},"  props",[81,733,361],{"class":176},[81,735,416],{"class":324},[81,737,194],{"class":176},[81,739,740],{"class":91},"title",[81,742,194],{"class":176},[81,744,426],{"class":176},[81,746,397],{"class":176},[81,748,749],{"class":91},"data",[81,751,194],{"class":176},[81,753,754],{"class":324},"]",[81,756,405],{"class":176},[81,758,759,761],{"class":83,"line":124},[81,760,375],{"class":180},[81,762,378],{"class":176},[81,764,765,767],{"class":83,"line":136},[81,766,384],{"class":320},[81,768,352],{"class":176},[81,770,771,774,776,779,781,784,787,790,792,795,797,800,802],{"class":83,"line":317},[81,772,773],{"class":180},"      detailData",[81,775,361],{"class":176},[81,777,778],{"class":176}," this.",[81,780,749],{"class":324},[81,782,783],{"class":176}," instanceof",[81,785,786],{"class":87}," Array",[81,788,789],{"class":176}," ?",[81,791,416],{"class":180},[81,793,794],{"class":176},"...this.",[81,796,749],{"class":324},[81,798,799],{"class":180},"] ",[81,801,361],{"class":176},[81,803,804],{"class":180}," []\n",[81,806,807],{"class":83,"line":343},[81,808,478],{"class":176},[81,810,811],{"class":83,"line":355},[81,812,484],{"class":176},[81,814,815],{"class":83,"line":372},[81,816,490],{"class":176},[81,818,819,821,823],{"class":83,"line":381},[81,820,296],{"class":176},[81,822,181],{"class":180},[81,824,231],{"class":176},[699,826,828],{"id":827},"explanation","Explanation",[18,830,831,832,835,836,839,840,843],{},"First, we have to define the data our custom-details will need which are a ",[833,834,740],"strong",{}," and some ",[833,837,838],{},"array of strings"," data by using the ",[25,841,842],{},"props"," attribute.",[72,845,849],{"className":846,"code":847,"language":848,"meta":77,"style":77},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  ...\n  props: [\"title\", \"data\"]\n  ...\n","javascript",[25,850,851,856,861],{"__ignoreMap":77},[81,852,853],{"class":83,"line":84},[81,854,855],{},"  ...\n",[81,857,858],{"class":83,"line":98},[81,859,860],{},"  props: [\"title\", \"data\"]\n",[81,862,863],{"class":83,"line":108},[81,864,855],{},[18,866,867,868,870,871,158],{},"Then, we have to ensure that the ",[25,869,749],{}," being provided by the parent component is an Array, so we check if the data is and array, if not, we return an empty array using the ",[833,872,873],{},"tenery operator",[72,875,877],{"className":846,"code":876,"language":848,"meta":77,"style":77},"this.data instanceof Array ? [...this.data] : []\n",[25,878,879],{"__ignoreMap":77},[81,880,881],{"class":83,"line":84},[81,882,876],{},[10,884,886],{"id":885},"time-to-add-some-styles-the-fun-part","Time to add some styles (the fun part :)",[18,888,889,890,697],{},"To make our code clean, we are using the ",[25,891,696],{},[699,893,895],{"id":894},"default-styles","Default styles",[18,897,898,899,902],{},"To our style.css which is usually automatically imported by your build tool into the ",[25,900,901],{},"main.js"," file, add the following to the top.",[72,904,908],{"className":905,"code":906,"language":907,"meta":77,"style":77},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@tailwind base;\n@tailwind utilities;\n","css",[25,909,910,920],{"__ignoreMap":77},[81,911,912,915,918],{"class":83,"line":84},[81,913,914],{"class":320},"@tailwind",[81,916,917],{"class":324}," base",[81,919,340],{"class":176},[81,921,922,924,927],{"class":83,"line":98},[81,923,914],{"class":320},[81,925,926],{"class":324}," utilities",[81,928,340],{"class":176},[18,930,931,932,935],{},"The ",[25,933,934],{},"@tailwind components;"," was not added since we do not require any more styles.",[699,937,939],{"id":938},"component-styles","Component styles",[18,941,942],{},"To our styles tag should initially look like this.",[72,944,946],{"className":167,"code":945,"language":169,"meta":77,"style":77},"\u003Cstyle scoped>\n\u003C\u002Fstyle>\n",[25,947,948,960],{"__ignoreMap":77},[81,949,950,952,955,958],{"class":83,"line":84},[81,951,251],{"class":176},[81,953,954],{"class":180},"style",[81,956,957],{"class":184}," scoped",[81,959,231],{"class":176},[81,961,962,964,966],{"class":83,"line":98},[81,963,296],{"class":176},[81,965,954],{"class":180},[81,967,231],{"class":176},[18,969,970,971,697],{},"First of, let us add some style to the ",[25,972,526],{},[72,974,976],{"className":905,"code":975,"language":907,"meta":77,"style":77},"details{\n  @apply border border-gray-300 rounded-md my-2 mx-auto;\n}\n",[25,977,978,985,999],{"__ignoreMap":77},[81,979,980,982],{"class":83,"line":84},[81,981,526],{"class":87},[81,983,984],{"class":176},"{\n",[81,986,987,990,994,997],{"class":83,"line":98},[81,988,989],{"class":324},"  @apply ",[81,991,993],{"class":992},"sqsOY","border",[81,995,996],{"class":324}," border-gray-300 rounded-md my-2 mx-auto",[81,998,340],{"class":176},[81,1000,1001],{"class":83,"line":108},[81,1002,490],{"class":176},[18,1004,1005,1006,1008],{},"Next, remove default markers of the ",[25,1007,535],{}," tag and style it",[72,1010,1012],{"className":905,"code":1011,"language":907,"meta":77,"style":77},"...\nsummary::-webkit-details-marker,\nsummary::marker{\n  display: none;\n}\n\ndetails > summary{\n  @apply flex py-2 cursor-pointer;\n}\n\ndetails[open] > summary{\n  @apply border-b border-gray-300;\n}\n...\n",[25,1013,1014,1019,1031,1042,1054,1058,1062,1074,1086,1090,1094,1112,1119,1123],{"__ignoreMap":77},[81,1015,1016],{"class":83,"line":84},[81,1017,1018],{"class":324},"...\n",[81,1020,1021,1023,1026,1029],{"class":83,"line":98},[81,1022,535],{"class":87},[81,1024,1025],{"class":176},"::",[81,1027,1028],{"class":184},"-webkit-details-marker",[81,1030,405],{"class":176},[81,1032,1033,1035,1037,1040],{"class":83,"line":108},[81,1034,535],{"class":87},[81,1036,1025],{"class":176},[81,1038,1039],{"class":184},"marker",[81,1041,984],{"class":176},[81,1043,1044,1047,1049,1052],{"class":83,"line":124},[81,1045,1046],{"class":992},"  display",[81,1048,361],{"class":176},[81,1050,1051],{"class":324}," none",[81,1053,340],{"class":176},[81,1055,1056],{"class":83,"line":136},[81,1057,490],{"class":176},[81,1059,1060],{"class":83,"line":317},[81,1061,306],{"emptyLinePlaceholder":305},[81,1063,1064,1066,1069,1072],{"class":83,"line":343},[81,1065,526],{"class":87},[81,1067,1068],{"class":176}," >",[81,1070,1071],{"class":87}," summary",[81,1073,984],{"class":176},[81,1075,1076,1078,1081,1084],{"class":83,"line":355},[81,1077,989],{"class":324},[81,1079,1080],{"class":992},"flex",[81,1082,1083],{"class":324}," py-2 cursor-pointer",[81,1085,340],{"class":176},[81,1087,1088],{"class":83,"line":372},[81,1089,490],{"class":176},[81,1091,1092],{"class":83,"line":381},[81,1093,306],{"emptyLinePlaceholder":305},[81,1095,1096,1098,1101,1104,1106,1108,1110],{"class":83,"line":389},[81,1097,526],{"class":87},[81,1099,1100],{"class":176},"[",[81,1102,1103],{"class":184},"open",[81,1105,754],{"class":176},[81,1107,1068],{"class":176},[81,1109,1071],{"class":87},[81,1111,984],{"class":176},[81,1113,1114,1117],{"class":83,"line":408},[81,1115,1116],{"class":324},"  @apply border-b border-gray-300",[81,1118,340],{"class":176},[81,1120,1121],{"class":83,"line":475},[81,1122,490],{"class":176},[81,1124,1125],{"class":83,"line":481},[81,1126,1018],{"class":324},[18,1128,1129],{},"Then, styling the inner summary div",[72,1131,1133],{"className":905,"code":1132,"language":907,"meta":77,"style":77},"...\n\nsummary > div {\n  @apply flex items-center gap-x-6 w-full text-gray-700 px-4;\n}\n\n...\n",[25,1134,1135,1139,1143,1154,1165,1169,1173],{"__ignoreMap":77},[81,1136,1137],{"class":83,"line":84},[81,1138,1018],{"class":324},[81,1140,1141],{"class":83,"line":98},[81,1142,306],{"emptyLinePlaceholder":305},[81,1144,1145,1147,1149,1152],{"class":83,"line":108},[81,1146,535],{"class":87},[81,1148,1068],{"class":176},[81,1150,1151],{"class":87}," div",[81,1153,352],{"class":176},[81,1155,1156,1158,1160,1163],{"class":83,"line":124},[81,1157,989],{"class":324},[81,1159,1080],{"class":992},[81,1161,1162],{"class":324}," items-center gap-x-6 w-full text-gray-700 px-4",[81,1164,340],{"class":176},[81,1166,1167],{"class":83,"line":136},[81,1168,490],{"class":176},[81,1170,1171],{"class":83,"line":317},[81,1172,306],{"emptyLinePlaceholder":305},[81,1174,1175],{"class":83,"line":343},[81,1176,1018],{"class":324},[18,1178,1179],{},"Finally, we then style the list",[72,1181,1183],{"className":905,"code":1182,"language":907,"meta":77,"style":77},"...\n\ndetails > ul {\n  @apply flex flex-col divide-y-2 divide-gray-200;\n}\n\nul > li {\n  @apply flex px-4 hover:bg-gray-50 cursor-pointer text-sm text-gray-500 font-bold py-1.5\n}\n",[25,1184,1185,1189,1193,1204,1215,1219,1223,1234,1252],{"__ignoreMap":77},[81,1186,1187],{"class":83,"line":84},[81,1188,1018],{"class":324},[81,1190,1191],{"class":83,"line":98},[81,1192,306],{"emptyLinePlaceholder":305},[81,1194,1195,1197,1199,1202],{"class":83,"line":108},[81,1196,526],{"class":87},[81,1198,1068],{"class":176},[81,1200,1201],{"class":87}," ul",[81,1203,352],{"class":176},[81,1205,1206,1208,1210,1213],{"class":83,"line":124},[81,1207,989],{"class":324},[81,1209,1080],{"class":992},[81,1211,1212],{"class":324}," flex-col divide-y-2 divide-gray-200",[81,1214,340],{"class":176},[81,1216,1217],{"class":83,"line":136},[81,1218,490],{"class":176},[81,1220,1221],{"class":83,"line":317},[81,1222,306],{"emptyLinePlaceholder":305},[81,1224,1225,1227,1229,1232],{"class":83,"line":343},[81,1226,39],{"class":87},[81,1228,1068],{"class":176},[81,1230,1231],{"class":87}," li",[81,1233,352],{"class":176},[81,1235,1236,1238,1240,1243,1245,1248],{"class":83,"line":355},[81,1237,989],{"class":324},[81,1239,1080],{"class":992},[81,1241,1242],{"class":324}," px-4 hover",[81,1244,361],{"class":176},[81,1246,1247],{"class":324},"bg-gray-50 cursor-pointer text-sm text-gray-500 font-bold py-1.",[81,1249,1251],{"class":1250},"sbssI","5\n",[81,1253,1254],{"class":83,"line":372},[81,1255,490],{"class":176},[18,1257,1258],{},"Your final CSS should look like this.",[72,1260,1262],{"className":167,"code":1261,"language":169,"meta":77,"style":77},"\u003Cstyle scoped>\n\n  details{\n    @apply border border-gray-300 rounded-md my-2 mx-auto;\n  }\n\n  details > summary{\n    @apply flex py-2 cursor-pointer;\n  }\n\n  details[open] > summary{\n    @apply border-b border-gray-300;\n  }\n\n  summary::-webkit-details-marker,\n  summary::marker{\n    display: none;\n  }\n\n  summary > div {\n    @apply flex items-center gap-x-6 w-full text-gray-700 px-4;\n  }\n\n  details > ul {\n    @apply flex flex-col divide-y-2 divide-gray-200;\n  }\n\n  ul > li {\n    @apply flex px-4 hover:bg-gray-50 cursor-pointer text-sm text-gray-500 font-bold py-1.5\n  }\n\n\u003C\u002Fstyle>\n",[25,1263,1264,1274,1278,1285,1296,1300,1304,1314,1324,1328,1332,1348,1355,1359,1363,1374,1384,1396,1401,1406,1417,1428,1433,1438,1449,1460,1465,1470,1482,1497,1502,1507],{"__ignoreMap":77},[81,1265,1266,1268,1270,1272],{"class":83,"line":84},[81,1267,251],{"class":176},[81,1269,954],{"class":180},[81,1271,957],{"class":184},[81,1273,231],{"class":176},[81,1275,1276],{"class":83,"line":98},[81,1277,306],{"emptyLinePlaceholder":305},[81,1279,1280,1283],{"class":83,"line":108},[81,1281,1282],{"class":87},"  details",[81,1284,984],{"class":176},[81,1286,1287,1290,1292,1294],{"class":83,"line":124},[81,1288,1289],{"class":324},"    @apply ",[81,1291,993],{"class":992},[81,1293,996],{"class":324},[81,1295,340],{"class":176},[81,1297,1298],{"class":83,"line":136},[81,1299,484],{"class":176},[81,1301,1302],{"class":83,"line":317},[81,1303,306],{"emptyLinePlaceholder":305},[81,1305,1306,1308,1310,1312],{"class":83,"line":343},[81,1307,1282],{"class":87},[81,1309,1068],{"class":176},[81,1311,1071],{"class":87},[81,1313,984],{"class":176},[81,1315,1316,1318,1320,1322],{"class":83,"line":355},[81,1317,1289],{"class":324},[81,1319,1080],{"class":992},[81,1321,1083],{"class":324},[81,1323,340],{"class":176},[81,1325,1326],{"class":83,"line":372},[81,1327,484],{"class":176},[81,1329,1330],{"class":83,"line":381},[81,1331,306],{"emptyLinePlaceholder":305},[81,1333,1334,1336,1338,1340,1342,1344,1346],{"class":83,"line":389},[81,1335,1282],{"class":87},[81,1337,1100],{"class":176},[81,1339,1103],{"class":184},[81,1341,754],{"class":176},[81,1343,1068],{"class":176},[81,1345,1071],{"class":87},[81,1347,984],{"class":176},[81,1349,1350,1353],{"class":83,"line":408},[81,1351,1352],{"class":324},"    @apply border-b border-gray-300",[81,1354,340],{"class":176},[81,1356,1357],{"class":83,"line":475},[81,1358,484],{"class":176},[81,1360,1361],{"class":83,"line":481},[81,1362,306],{"emptyLinePlaceholder":305},[81,1364,1365,1368,1370,1372],{"class":83,"line":487},[81,1366,1367],{"class":87},"  summary",[81,1369,1025],{"class":176},[81,1371,1028],{"class":184},[81,1373,405],{"class":176},[81,1375,1376,1378,1380,1382],{"class":83,"line":493},[81,1377,1367],{"class":87},[81,1379,1025],{"class":176},[81,1381,1039],{"class":184},[81,1383,984],{"class":176},[81,1385,1387,1390,1392,1394],{"class":83,"line":1386},17,[81,1388,1389],{"class":992},"    display",[81,1391,361],{"class":176},[81,1393,1051],{"class":324},[81,1395,340],{"class":176},[81,1397,1399],{"class":83,"line":1398},18,[81,1400,484],{"class":176},[81,1402,1404],{"class":83,"line":1403},19,[81,1405,306],{"emptyLinePlaceholder":305},[81,1407,1409,1411,1413,1415],{"class":83,"line":1408},20,[81,1410,1367],{"class":87},[81,1412,1068],{"class":176},[81,1414,1151],{"class":87},[81,1416,352],{"class":176},[81,1418,1420,1422,1424,1426],{"class":83,"line":1419},21,[81,1421,1289],{"class":324},[81,1423,1080],{"class":992},[81,1425,1162],{"class":324},[81,1427,340],{"class":176},[81,1429,1431],{"class":83,"line":1430},22,[81,1432,484],{"class":176},[81,1434,1436],{"class":83,"line":1435},23,[81,1437,306],{"emptyLinePlaceholder":305},[81,1439,1441,1443,1445,1447],{"class":83,"line":1440},24,[81,1442,1282],{"class":87},[81,1444,1068],{"class":176},[81,1446,1201],{"class":87},[81,1448,352],{"class":176},[81,1450,1452,1454,1456,1458],{"class":83,"line":1451},25,[81,1453,1289],{"class":324},[81,1455,1080],{"class":992},[81,1457,1212],{"class":324},[81,1459,340],{"class":176},[81,1461,1463],{"class":83,"line":1462},26,[81,1464,484],{"class":176},[81,1466,1468],{"class":83,"line":1467},27,[81,1469,306],{"emptyLinePlaceholder":305},[81,1471,1473,1476,1478,1480],{"class":83,"line":1472},28,[81,1474,1475],{"class":87},"  ul",[81,1477,1068],{"class":176},[81,1479,1231],{"class":87},[81,1481,352],{"class":176},[81,1483,1485,1487,1489,1491,1493,1495],{"class":83,"line":1484},29,[81,1486,1289],{"class":324},[81,1488,1080],{"class":992},[81,1490,1242],{"class":324},[81,1492,361],{"class":176},[81,1494,1247],{"class":324},[81,1496,1251],{"class":1250},[81,1498,1500],{"class":83,"line":1499},30,[81,1501,484],{"class":176},[81,1503,1505],{"class":83,"line":1504},31,[81,1506,306],{"emptyLinePlaceholder":305},[81,1508,1510,1512,1514],{"class":83,"line":1509},32,[81,1511,296],{"class":176},[81,1513,954],{"class":180},[81,1515,231],{"class":176},[18,1517,1518],{},"If properly followed, you should end up with a details element that looks the part.",[18,1520,1521],{},"Thanks for reading and have a good day.",[954,1523,1524],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":77,"searchDepth":98,"depth":98,"links":1526},[1527,1528,1529,1530,1534],{"id":12,"depth":98,"text":13},{"id":52,"depth":98,"text":53},{"id":237,"depth":98,"text":238},{"id":502,"depth":98,"text":503,"children":1531},[1532,1533],{"id":701,"depth":108,"text":702},{"id":827,"depth":108,"text":828},{"id":885,"depth":98,"text":886,"children":1535},[1536,1537],{"id":894,"depth":108,"text":895},{"id":938,"depth":108,"text":939},"2022-08-17","The default \u003Cdetails> styling is ugly enough that most people reach for divs and state management instead. Here is how to make it look good with Tailwind and a small Vue component.",false,"md",{},"\u002Fblog\u002F2022\u002Fstyling-the-details-tag-with-tailwind-and-vue",{"title":5,"description":1539},"blog\u002F2022\u002F01.styling-the-details-tag-with-tailwind-and-vue","The default \u003Cdetails> tag is pretty ugly, so most of us give up on it and rebuild it with divs and some state instead (I did too). Here's how I made the real thing look good with Tailwind and a small Vue component.",[1548,127,907],"vue","Xlob4VODeEJuxdZ1oyEadxZzz_Ll1OQOCtWCeOsKFo4",1789778980296]