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's an interesting idea to entertain as a thought, and some utility classes certainly hold value in general, but I don'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're always left with manually checking every single instance just for a small change like this.
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 designing pages.<p>There is however one thing that prevents me from using it for everything and I'm curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS/backend/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 <div class="container">{{ body }}</div>. 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'm at a loss.
Hey everyone!<p>I tweeted a video of the app in action here: <a href="https://twitter.com/utkarshkukreti/status/1158323716515778560" rel="nofollow">https://twitter.com/utkarshkukreti/status/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/Emacs/Sublime key bindings + Emmet
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!
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://gekri.com" rel="nofollow">https://gekri.com</a>
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 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'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://acss.io/" rel="nofollow">https://acss.io/</a>
Taiwind is nice.<p>For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. <a href="https://github.com/meerita/utilcss" rel="nofollow">https://github.com/meerita/utilcss</a> here is the article related <a href="http://minid.net/2019/04/07/the-css-utilitarian-methodology/" rel="nofollow">http://minid.net/2019/04/07/the-css-utilitarian-methodology/</a><p>Once you start using funcional CSS, you don't want to go back.
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.
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.
Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use <a href="https://basscss.com/" rel="nofollow">https://basscss.com/</a>, but been meaning to checkout larger Atomic CSS frameworks like Tailwind and Tachyons.<p>Aside from the benefits of "functional CSS" that others have mentioned, one thing I really love about it is I don't have to constantly be looking up CSS rules or properties; I just reference the docs of whatever framework I'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'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.
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't do that and that'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's link<p><pre><code> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Tutorials</a>
<a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Plugins</a>
<a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Features</a>
<a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Blog</a>
</code></pre>
which is not extensible and creates duplicate code. You'd still have duplicate class names but I just have to change it once in the css instead of N different places in HTML.
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://uxeranalytics.com/" rel="nofollow">https://uxeranalytics.com/</a>
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 actual styling rules? No that is something I could get behind.
Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (<a href="https://www.sideprojectors.com" rel="nofollow">https://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.
I recently tried learning Tachyons, I couldn'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.
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!