[{"data":1,"prerenderedAt":491},["ShallowReactive",2],{"project-20653942":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":47,"post_text":48,"what":49,"said":68,"maker_in_thread":185,"shape":194,"grid":198,"attempts":455,"same_week":456,"maker_shows":40,"maker_hidden":483,"reader_version":484,"card":485},"20653942","Tailwind.run","An Online Playground for Tailwind CSS","title","Show HN: Tailwind.run – An Online Playground for Tailwind CSS","https:\u002F\u002Ftailwind.run","tailwind.run","utkarshkukreti",1565356350,2019,181,95,224,2195,11,"notable","dev_tools","css playground","web_app",[24,21,25,26],"tailwind css","utility css","live preview","mixed",0.266,{"positive":30,"neutral":31,"mixed":32,"critical":18},28,17,3,59,{"design":35,"performance":38,"idea":41,"docs":44},{"positive":36,"critical":37},8,6,{"positive":39,"critical":40},5,1,{"positive":42,"critical":43},10,4,{"positive":45,"critical":46},2,0,[40,32,43,46,46,39,46,39,32,39,39,39,32,39,40,32,40,39,32,39,46,39,39,39,46,46,46,40,39,45,39,46,46,46,45,32,32,39,39,43],null,{"problem":50,"audience":48,"pricing":48,"motivation":57,"time_to_build":61,"stack":65,"openness":66,"stage":67,"team_size":66},{"value":51,"source":52,"evidence":53},"Lets people write and preview Tailwind CSS config and markup in the browser","maker",[54],{"id":55,"by":11,"text":56},"20653966","Hey everyone! I tweeted a video of the app in action here: https:\u002F\u002Ftwitter.com\u002Futkarshkukreti\u002Fstatus\u002F1158323716515778560 I made this TailwindCSS Playground over the last two…",{"value":58,"source":52,"evidence":59},"Maker likes Tailwind's core idea and productivity gains and wanted to build more with it",[60],{"id":55,"by":11,"text":56},{"value":62,"source":52,"evidence":63},"Built over the last two weeks",[64],{"id":55,"by":11,"text":56},[],"unknown","launched",{"praise":69,"objections":105,"requests":132,"questions":147,"alternatives":159},[70,90],{"value":71,"source":72,"evidence":73},"Useful for prototyping and quick design with Tailwind","commenter",[74,78,82,86],{"id":75,"by":76,"text":77},"20656118","dinkleberg","I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive when it comes to…",{"id":79,"by":80,"text":81},"20655342","foobar_","Tailwind is quite nice for raw prototyping. I'm still not how it compares to basscss. I would love a pure scss version of tailwind.",{"id":83,"by":84,"text":85},"20655469","tunedmystic","Love it! I'm using Tailwindcss on a project now, and this tool will come in pretty handy!",{"id":87,"by":88,"text":89},"20662392","sideproject","Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (https:\u002F\u002Fwww.sideprojectors.com) and was able to get my CSS developed very fast. I have…",{"value":91,"source":72,"evidence":92},"Utility classes improve productivity and maintainability",[93,97,101],{"id":94,"by":95,"text":96},"20657390","antonkm","I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and…",{"id":98,"by":99,"text":100},"20656143","jasim","Tailwind makes it very easy to change theme by changing just a single configuration file: https:\u002F\u002Ftailwindcss.com\u002F#designed-to-be-customized It is very liberating to use Tailwind…",{"id":102,"by":103,"text":104},"20657975","keb_","Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use https:\u002F\u002Fbasscss.com\u002F, but been meaning to checkout larger Atomic CSS frameworks like…",[106,121],{"value":107,"source":72,"evidence":108},"Utility classes resemble inline styles and hurt maintainability",[109,113,117],{"id":110,"by":111,"text":112},"20656101","Etheryte","While semantic styling has been around for quite a while in different shapes and forms, this is essentially the same as inlining all of your styles in a style attribute on every…",{"id":114,"by":115,"text":116},"20655109","bbmario","I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!",{"id":118,"by":119,"text":120},"20659729","thrownaway954","That are some bloated classes. it's no different in inline styling everything to me. I really don't see the benefit in doing it this way. Can you use tailwinds and scss to create…",{"value":122,"source":72,"evidence":123},"Exported CSS is very large unless purged",[124,128],{"id":125,"by":126,"text":127},"20654806","M4v3R","It looks nice, but exported CSS is 880 kB unminified (670 kB minified). Yikes. Is there a way to strip out unused portions of it?",{"id":129,"by":130,"text":131},"20654732","adriansky","This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave…",[133,140],{"value":134,"source":72,"evidence":135},"Generate minimal CSS from selected color and component choices",[136],{"id":137,"by":138,"text":139},"20656412","Tomte","Even if compression is the solution for most users, I would love to have a generator on the web site where I can click on \"blue\" and \"orange\" (because that's my color scheme and…",{"value":141,"source":72,"evidence":142},"Showcase Tailwind components in a catalog",[143],{"id":144,"by":145,"text":146},"20658499","blorenz","Very nice! I'm hoping that this can be a catalog and discovery tool in the future where we can showcase Tailwind components. Looking forward to it!",[148,152],{"value":149,"source":72,"evidence":150},"Is there a way to strip unused CSS from the export",[151],{"id":125,"by":126,"text":127},{"value":153,"source":72,"evidence":154},"Does one need to be a CSS expert to use this",[155],{"id":156,"by":157,"text":158},"20660117","smnplk","Do i need to be an expert in CSS first to use this ?",[160,167,175,180],{"value":161,"source":72,"evidence":162},"Atomic CSS",[163],{"id":164,"by":165,"text":166},"20655071","dlbucci","Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as…",{"value":168,"source":72,"evidence":169},"Tachyons",[170,174],{"id":171,"by":172,"text":173},"20656649","cygned","The major selling point from my point of view, and the reason why I switched from Tachyons, are components. With that, one can easily compose styles. ``` .btn { @apply…",{"id":102,"by":103,"text":104},{"value":176,"source":72,"evidence":177},"Basscss",[178,179],{"id":102,"by":103,"text":104},{"id":79,"by":80,"text":81},{"value":181,"source":72,"evidence":182},"Bootstrap",[183,184],{"id":94,"by":95,"text":96},{"id":102,"by":103,"text":104},{"comments":32,"answered":40,"key":186},[187,188,191],{"id":55,"text":56},{"id":189,"text":190},"20654497","Adam Wathan (creator of Tailwind CSS) is working on an excellent screencast series about using Tailwind: https:\u002F\u002Ftailwindcss.com\u002Fscreencasts. I highly recommend watching it.",{"id":192,"text":193},"20654895","I _had_ to add it -- I can't write code without vim keybindings!",{"commenters":195,"max_depth":196,"maker_replies":32,"first_comment_mins":32,"lifespan_hours":197},60,7,241,[199,201,205,207,211,215,219,223,226,230,234,237,241,244,247,250,253,256,260,263,266,268,270,272,276,279,282,284,287,289,292,293,296,298,299,302,303,305,308,311,313,315,319,320,323,325,328,331,335,338,340,342,345,348,351,355,358,361,363,366,368,372,375,377,379,381,384,385,387,390,392,393,395,397,400,402,405,407,409,411,413,416,418,420,423,425,430,432,434,437,441,443,445,449,452],[110,46,40,200,111,46],"project\u002Fcritical\u002Fdesign",[202,46,46,203,204,46],"20656288","commenter\u002Fneutral\u002Fperformance","thijsvandien",[137,46,32,206,138,46],"project\u002Fneutral\u002Fperformance",[208,46,46,209,210,46],"20657802","other\u002Fneutral\u002Fnone","no_wizard",[212,46,39,213,214,46],"20659859","project\u002Fpositive\u002Fperformance","earthboundkid",[216,46,39,217,218,46],"20656320","project\u002Fpositive\u002Fdesign","cuddlecake",[220,46,40,221,222,46],"20657329","project\u002Fcritical\u002Fidea","wishinghand",[224,46,46,225,218,46],"20659739","commenter\u002Fpositive\u002Fidea",[227,46,46,228,229,46],"20656389","commenter\u002Fneutral\u002Fexecution","danchristian",[231,46,46,232,233,46],"20657116","commenter\u002Fcritical\u002Fexecution","hisnameisjimmy",[235,46,46,236,95,46],"20657313","commenter\u002Fpositive\u002Fexecution",[238,46,39,239,240,46],"20657494","project\u002Fpositive\u002Fidea","mattferderer",[242,46,46,243,111,46],"20658395","commenter\u002Fcritical\u002Fidea",[245,46,46,225,246,46],"20664616","adamwathan",[248,46,46,249,111,46],"20665237","commenter\u002Fmixed\u002Fidea",[251,46,46,252,240,46],"20688124","commenter\u002Fneutral\u002Fidea",[254,46,39,213,255,46],"20657711","qudat",[257,46,32,258,259,46],"20657756","project\u002Fmixed\u002Fdesign","andrei_says_",[261,46,46,209,262,46],"20658889","dlwdlw",[264,46,32,206,265,46],"20659432","dillondoyle",[75,40,32,267,76,46],"project\u002Fneutral\u002Fdesign",[269,40,32,267,99,46],"20656185",[271,40,39,217,76,46],"20656435",[273,40,32,274,275,46],"20656248","project\u002Fneutral\u002Fdocs","yagodragon",[277,40,39,278,76,46],"20656421","project\u002Fpositive\u002Fdocs",[280,40,39,217,281,46],"20657298","iandinwoodie",[283,40,39,217,76,46],"20657342",[285,40,32,286,246,46],"20659186","maker\u002Fneutral\u002Fdesign",[55,45,46,288,11,40],"project\u002Fpositive\u002Fnone",[290,45,32,274,291,46],"20654459","Numberwang",[189,45,46,278,11,40],[294,45,39,217,295,46],"20654855","vcavallo",[192,45,46,297,11,40],"maker\u002Fpositive\u002Fdesign",[114,32,40,221,115,46],[300,32,40,221,301,46],"20655361","yoz-y",[94,32,39,239,95,46],[304,32,32,274,301,46],"20683390",[306,32,40,221,307,46],"20655398","skrebbel",[309,32,46,252,310,46],"20655695","have_faith",[312,32,40,200,115,46],"20679287",[314,32,39,239,204,46],"20655867",[316,32,32,317,318,46],"20655884","project\u002Fmixed\u002Fidea","jszymborski",[98,32,39,239,99,46],[321,32,46,252,322,46],"20657382","emn13",[324,32,40,200,115,46],"20679267",[326,32,46,327,99,46],"20697263","commenter\u002Fpositive\u002Fdesign",[329,43,39,288,330,46],"20654654","KevinNTH",[332,43,46,333,334,46],"20655977","other\u002Fneutral\u002Fprivacy","lauritzsh",[336,43,46,337,330,46],"20738147","other\u002Fpositive\u002Fprivacy",[164,39,32,339,165,46],"project\u002Fneutral\u002Fidea",[341,39,39,217,204,46],"20655223",[343,39,39,239,344,46],"20655706","dmix",[346,39,39,213,347,46],"20655254","oskarp",[349,39,39,213,350,46],"20655281","HEHENE",[352,39,46,353,354,46],"20655834","other\u002Fneutral\u002Fperformance","leeoniya",[356,37,39,239,357,46],"20657032","meerita",[359,37,46,243,360,46],"20657156","holler",[362,37,46,252,357,46],"20657200",[364,37,46,243,365,46],"20658025","weego",[367,37,46,203,357,46],"20660975",[369,37,46,370,371,46],"20658441","commenter\u002Fneutral\u002Fdesign","ivanhoe",[373,37,46,374,357,46],"20660959","commenter\u002Fneutral\u002Fnone",[376,37,46,374,371,46],"20663853",[378,37,46,370,357,46],"20673571",[380,37,46,370,357,46],"20660994",[382,196,40,200,383,46],"20656370","peternicky",[171,36,39,217,172,46],[102,386,39,239,103,46],9,[388,42,40,200,389,46],"20656543","spectramax",[391,42,32,274,218,46],"20656603",[79,18,32,258,80,46],[129,394,39,213,130,46],12,[396,394,32,206,138,46],"20654980",[398,394,46,374,399,46],"20655053","dpacmittal",[401,394,46,209,138,46],"20655118",[403,394,46,374,404,46],"20655939","jazoom",[406,394,46,374,138,46],"20656100",[408,394,46,209,404,46],"20658211",[410,394,46,209,354,46],"20655881",[412,394,46,374,138,46],"20656117",[125,414,40,415,126,46],13,"project\u002Fcritical\u002Fperformance",[417,414,32,206,172,46],"20654820",[419,414,32,206,295,46],"20654831",[421,414,32,206,422,46],"20654852","daniels76",[424,414,32,274,347,46],"20655269",[426,427,39,428,429,46],"20654556",14,"maker\u002Fpositive\u002Fnone","whammywon",[118,431,40,200,119,46],15,[87,433,39,217,88,46],16,[435,31,39,239,436,46],"20655343","woile",[438,439,39,278,440,46],"20656486",18,"GaryNumanVevo",[144,442,39,239,145,46],19,[83,444,39,288,84,46],20,[446,447,32,274,448,46],"20656888",21,"recursive",[450,447,39,239,451,46],"20656972","icxa",[156,453,32,454,157,46],22,"project\u002Fneutral\u002Fnone",[],[457,461,466,471,474,479],{"id":458,"name":459,"points":460,"category":20},"20688044","Divjoy",511,{"id":462,"name":463,"points":464,"category":465},"20687398","Yack",246,"productivity",{"id":467,"name":468,"points":469,"category":470},"20645319","Python re(gex)?",193,"learning_science",{"id":472,"name":473,"points":469,"category":20},"20698966","StoryTime",{"id":475,"name":476,"points":477,"category":478},"20653278","haskell-poker",157,"games",{"id":480,"name":481,"points":482,"category":465},"20670039","Personal Management System",153,false,"v2",{"id":486,"name":5,"line":6,"ai":483,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":487,"top":18,"kw":488,"maker":11,"domain":10,"tier":19,"attempts":46,"strip":489,"url":9,"mix":490,"praise":71,"objection":107,"sub":21},20653942,0.27,[24,21,25,26],"1340050535553513153505550001525000233554",[30,31,32,18],1794036579737]