TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: Tailwind.run – An Online Playground for Tailwind CSS

181 点作者 utkarshkukreti将近 6 年前

23 条评论

Etheryte将近 6 年前
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 element, albeit just a bit shorter to write.<p>It&#x27;s an interesting idea to entertain as a thought, and some utility classes certainly hold value in general, but I don&#x27;t see how you would ever reasonably want to use this in a project. It has all the same drawbacks as writing inline styles on elements, not to mention the large size.<p>Say you have a number of views and decide (or a client decides) you want all of the buttons to have a bit more padding. If anything else happens to completely accidentally also use the same padding class you&#x27;re always left with manually checking every single instance just for a small change like this.
评论 #20657494 未加载
评论 #20656320 未加载
评论 #20656288 未加载
评论 #20657756 未加载
评论 #20656389 未加载
评论 #20658889 未加载
评论 #20657711 未加载
评论 #20659432 未加载
dinkleberg将近 6 年前
I&#x27;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 designing pages.<p>There is however one thing that prevents me from using it for everything and I&#x27;m curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS&#x2F;backend&#x2F;whatever, how can I style this?<p>I tend to use Django for my backend, so in my template files I just put in a chunk like &lt;div class=&quot;container&quot;&gt;{{ body }}&lt;&#x2F;div&gt;. If that chunk has h2,p, etc. none of those are getting styled.<p>In normal css I could just define what those h2, p, etc look like under a specific class. But besides using some js magic to inject those classes, I&#x27;m at a loss.
评论 #20657298 未加载
评论 #20656185 未加载
评论 #20656248 未加载
utkarshkukreti将近 6 年前
Hey everyone!<p>I tweeted a video of the app in action here: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;utkarshkukreti&#x2F;status&#x2F;1158323716515778560" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;utkarshkukreti&#x2F;status&#x2F;115832371651577856...</a><p>I made this TailwindCSS Playground over the last two weeks. I really like the core idea of Tailwind and the productivity gains it gives and would like to build more stuff with it in the future!<p>Features:<p>* Compile custom @tailwindcss config and CSS in the browser<p>* Live preview in 5 screen sizes<p>* Class name autocompletion with CSS definition preview<p>* Save code online or export .zip<p>* Vim&#x2F;Emacs&#x2F;Sublime key bindings + Emmet
评论 #20654855 未加载
评论 #20654459 未加载
bbmario将近 6 年前
I don&#x27;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!
评论 #20656143 未加载
评论 #20655398 未加载
评论 #20655867 未加载
评论 #20655884 未加载
评论 #20655361 未加载
KevinNTH将近 6 年前
Awesome project. I am a big fan of Tailwind CSS to and I use it for my current project [1]. I will definitely make use of Tailwind.run() to as a playground to design components! Great job!<p>[1] <a href="https:&#x2F;&#x2F;gekri.com" rel="nofollow">https:&#x2F;&#x2F;gekri.com</a>
评论 #20655977 未加载
dlbucci将近 6 年前
Cool! I&#x27;ve been wanting to try a framework like Tailwind, but I get the feeling I&#x27;d like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don&#x27;t use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? Does anyone have experience with both (or some other micro class framework) who can tell me how they compare?<p>[1] <a href="https:&#x2F;&#x2F;acss.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;acss.io&#x2F;</a>
评论 #20655223 未加载
评论 #20655281 未加载
评论 #20655834 未加载
评论 #20655254 未加载
meerita将近 6 年前
Taiwind is nice.<p>For those interested in Functional CSS, I&#x27;ve made a Scss&#x2F;Sass framework too, with different approach. <a href="https:&#x2F;&#x2F;github.com&#x2F;meerita&#x2F;utilcss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;meerita&#x2F;utilcss</a> here is the article related <a href="http:&#x2F;&#x2F;minid.net&#x2F;2019&#x2F;04&#x2F;07&#x2F;the-css-utilitarian-methodology&#x2F;" rel="nofollow">http:&#x2F;&#x2F;minid.net&#x2F;2019&#x2F;04&#x2F;07&#x2F;the-css-utilitarian-methodology&#x2F;</a><p>Once you start using funcional CSS, you don&#x27;t want to go back.
评论 #20657156 未加载
评论 #20658441 未加载
peternicky将近 6 年前
I played around with tailwind on a small project and found it more difficult than I expected. I think part of the problem is that when using tailwind or other similar frameworks, the conceptual model and workflow is different and requires some cognitive overhead to use effectively and efficiently.<p>Perhaps one day I will try again but personally I want to minimize extra stuff to learn, especially related to css and styling.
cygned将近 6 年前
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.<p><pre><code> .btn { @apply cursor-pointer bg-blue border-blue-darker text-white; } </code></pre> When developing a web app, this allows you to have a central style configuration and reusability.
keb_将近 6 年前
Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use <a href="https:&#x2F;&#x2F;basscss.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;basscss.com&#x2F;</a>, but been meaning to checkout larger Atomic CSS frameworks like Tailwind and Tachyons.<p>Aside from the benefits of &quot;functional CSS&quot; that others have mentioned, one thing I really love about it is I don&#x27;t have to constantly be looking up CSS rules or properties; I just reference the docs of whatever framework I&#x27;m using to get what I want. You might say I could do this with Bootstrap as well -- and yeah, I can, but I much prefer the piece-meal approach of atomic CSS. The times I&#x27;ve used Bootstrap, I found myself fighting their styles constantly, or giving up and resulting with a site that looks like every other Bootstrap page.
spectramax将近 6 年前
CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones.<p>Say, I have a class:<p><pre><code> foo { color: #FF0000; } </code></pre> I want to now apply this class to another class:<p><pre><code> bar(foo) { background-color: #000000; } </code></pre> I want to be able to inherit from foo, but I can&#x27;t do that and that&#x27;s why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the HTML but now we have repeating patterns in the HTML, such as in the OP&#x27;s link<p><pre><code> &lt;a class=&quot;px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100&quot;&gt;Tutorials&lt;&#x2F;a&gt; &lt;a class=&quot;px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100&quot;&gt;Plugins&lt;&#x2F;a&gt; &lt;a class=&quot;px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100&quot;&gt;Features&lt;&#x2F;a&gt; &lt;a class=&quot;px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100&quot;&gt;Blog&lt;&#x2F;a&gt; </code></pre> which is not extensible and creates duplicate code. You&#x27;d still have duplicate class names but I just have to change it once in the css instead of N different places in HTML.
评论 #20656603 未加载
评论 #20656633 未加载
foobar_将近 6 年前
Tailwind is quite nice for raw prototyping. I&#x27;m still not how it compares to basscss. I would love a pure scss version of tailwind.
adriansky将近 6 年前
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 the css classes that I used and remove all others. That solved the size issue.<p>[1] <a href="https:&#x2F;&#x2F;uxeranalytics.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;uxeranalytics.com&#x2F;</a>
评论 #20654980 未加载
M4v3R将近 6 年前
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?
评论 #20655269 未加载
评论 #20654852 未加载
评论 #20654820 未加载
评论 #20654831 未加载
whammywon将近 6 年前
Awesome! I haven&#x27;t used Tailwind for any big projects (yet!) but I _have_ tinkered with it, and I really like it.<p>Good work!
thrownaway954将近 6 年前
That are some bloated classes. it&#x27;s no different in inline styling everything to me. I really don&#x27;t see the benefit in doing it this way. Can you use tailwinds and scss to create actual styling rules? No that is something I could get behind.
sideproject将近 6 年前
Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (<a href="https:&#x2F;&#x2F;www.sideprojectors.com" rel="nofollow">https:&#x2F;&#x2F;www.sideprojectors.com</a>) and was able to get my CSS developed very fast. I have most of Tailwind classes in my head now, so I hardly look up their site for references. Being able to quickly edit the UI without much thinking is very refreshing.
woile将近 6 年前
Wow, this is awesome, I have always felt comfortable using css utilities like px-2, text-center, or border-0, this goes next level, super interesting.
GaryNumanVevo将近 6 年前
I recently tried learning Tachyons, I couldn&#x27;t get the hang of it, until I was on the train with no internet and I only had an example blog site loaded, and the table of styles. I was able to put together my new website theme in an hour.
blorenz将近 6 年前
Very nice! I&#x27;m hoping that this can be a catalog and discovery tool in the future where we can showcase Tailwind components. Looking forward to it!
tunedmystic将近 6 年前
Love it! I&#x27;m using Tailwindcss on a project now, and this tool will come in pretty handy!
recursive将近 6 年前
I can&#x27;t tell from this what Tailwind actually is, or how to use it.
评论 #20656972 未加载
smnplk将近 6 年前
Do i need to be an expert in CSS first to use this ?