Wolfr_

I was in no way talking about you, I was talking about backend devs in general who are thankful for something like Tailwind.

Just like I, a front-end dev + designer am thankful for something like Firebase, because my backend skills are fairly nonexistent.

This is the best design app since 2016. Has Google Docs-alike multiplayer editing but in a design doc. Love Figma.

I'll try and clarify what I mean here. Tailwind seems to appeal to devs who feel they never fully grasped CSS + design.

Because it provides a copy-pastable subset of reliable classes where you end result will look good.

As a company we are often hired to fill a knowledge gap (exactly in design and front-end). The nature of agency work is to leave a deliverable for the client to work with.

My idea is that when the project is over and the design/front-end gap still exists in the team, perhaps it is better to leave something more manipulatable (I used the word malleable originally).

I think with the great docs that Tailwind has it might be easier for someone who is not a front-end dev to manipulate a `<div class="p-4">` to `<div class="p-3">` than to come across a BEM/ITCSS component, written in SCSS* where you have to understand much more concepts to manipulate it skillfully.

*(our preferred stack really)

I agree, but none of those tweets were directed at the authors. They were just talking about Tailwind in general. One was a poor joke.

My 3 blog posts were a genuine attempt at trying to dissect what I didn't like about the framework. Many people wrote in to thank me for that perspective.

I find it unfair to single out two historical tweets neither of which is directed at the authors.

I was just using my other Twitter accounts to stay up to date, it's not a big deal.

I just genuinely wonder if blocking people that don't agree with you is a good strategy.

I guess over time things also changed, Tailwind 2y ago was not the same as Tailwind now. They hired a bigger team and became much more of a company.

The context is that we're primarily a design company, the front-end is a way to express our designs.

A big reason for me is that I want the bigger group in our company to experiment with several CSS techniques to grow as front-end developers. If I (as a manager) set a constraint on one type of CSS it is difficult to learn more.

As an agency it makes sense to have broad capabilities. I think as a freelancer it's super fine to just constrain yourself to what you like, as you state there is huge demand out there.

Nice of you to look up those from my hundreds of tweets.

Now, since we bought Tailwind UI to do our work, we are technically also a customer.

We're trying to find the balance between semantic classes and utilities now with @apply. I've always found layout to be easier with utility classes (regardless of Tailwind, this counts for Bootstrap 4 too).

I like "atom"-like components better with semantic classes. In BEM/ITSS I'd make a component for -everything-. But in Tailwind we'd only make one for common "atoms" such as buttons, tags, inputs etc.

Code example: write ".t-button" and then use @apply to put the classes there. Keeping the design constrained to a set of tokens.

    .t-button {
        @apply border
               inline-flex
               items-center
               px-3
               leading-5
               font-medium
               rounded
               focus_outline-none
               focus_ring-2
               focus_ring-offset-2
               focus_ring-blue-500;
    }

I have a hard time describing it. Probably because we're quite unique in how we work as a design company and we draw a line that other people don't.

We should really change the name, there's too many projects called Bedrock.

If that's really their intent why not do a layoff round with a bigger severance package for 10-20 ppl to get back to 30 people, it would be less painful than this PR disaster?

I think if 1/3 of your company leaves there is short-term morale loss for the ones that remain. But the loss of internal IP will be devastating. Especially if you are not big on docs and have that “just be smart and ship” approach that Basecamp has. Basecamp has a real problem hand here... they probably never expected this.

The founders went into a political discussion with someone on the other side of the political spectrum and got tired of it - then instituted a no-politics-and-society-discussion policy when the whole success of Basecamp is taking a societal , opionated view on software and what work should be.

As a dev? Just put yourself out there as a freelancer with a nice website. Take jobs, ask money, bill it.

Mono Design - Senior UI/UX designer - Remote but within weekly travel distance of Antwerp/Ghent, Belgium (<100km)

We design complex business software. Looking for a problem-solving designer with a lot of UI chops to design great software.

Job post: https://mono.company/jobs/senior-ux-ui-designer/

Depends on the kind of work, for me, in the kind of long-running web software I make HTML is actually maintained or refactored.

I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems?

Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)?

If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects?

    class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10"

With BEM/ITCSS, you would have a custom namespace like `auk`:

    class="auk-btn auk-btn--primary"

And you can reason about it, maybe in project 2 it is

    class="auk2-btn auk2-btn--primary"

So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above.

If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all?

Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We've had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There's no way Tailwind can take credit for this.

I've written extensively about why Tailwind is problematic:

(1) https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/

(2) https://johanronsse.be/2020/07/08/why-youll-probably-regret-...

(3) https://johanronsse.be/2020/08/20/hey-your-api-surface-is-ca...

Don't fall for it! The marketing is sweet but the choice will hurt you in the end.

Yep. There's so many global replace situations where the logic completely breaks.

Most people use rem these days, but there are common browser bugs with using rems or ems in media query rules, so in the rules specifically it is common to still specify pixels, even if the rest of your stylesheet uses rems or ems.

Their marketing is good, they do a primo job at conveying the message in a nice looking way, but the end result is still HTML littered with hundreds classes, that gets hard to maintain and impossible to refactor.

I made a small front-end for a web app before: http://johanronsse.be/skilliverse-10/ -

Video: https://www.youtube.com/watch?v=qicEFB_XrQQ

This is much more about what the framework solves: UI as a function of the data, no spaghetti code full of DOM handlers and cross-references that are hard to follow.

Now I just used Svelte for this project, which is indeed a simple website which might not need this at all.

Still, I invite you to do similar transitions as I have between every page and on the homepage without a framework.

Thank you :)

Here's a fun demo to look at: https://twitter.com/rich_harris/status/1200807516529147904

Thanks, I am going to investigate this.

It did well in the State of JS, but there are no big names using it. I think it will have grow in popularity in 2020. The community is still relatively small.

I am still 100% confused as to how it would work it I would "enable SSR" (which Sapper would allow you to do). Would the end result be a static site then? Something to explore next year (also see the comment below about it not working at all without JS)

You can find versions that support Javascript at http://bestof2018.johanronsse.be/ and http://bestof2017.johanronsse.be/ . I used a static site generator for this.

This is clearly a technology exploration.

How can I explore new technologies if I impose limits that others don't set for themselves? The job market asks for JS skills. Look at my conclusion at the bottom of my post: I state that this might be a technology downgrade instead of upgrade.

I used Sapper before, I quite like it.

But now I wanted to explore how one would build something like Sapper, this is why I went for base Svelte and then added a router. I now have pretty much what I used Sapper for and the setup is simpler.

Also, Sapper doesn't seem to be in active development.

Pretty much this, utility-first leads to unmaintainable codebases, I try to explain why I want to change this with a combination of conventions on this page: https://ygdir.dev/rationale

This is something very new (a few weeks) and still a work in progress, it's nowhere near complete. It's going to be a “way of doing things” instead of a full-on framework, but at the same time, we could use more examples on how to exactly do what it prescribes. A tutorial, a sample project following the conventions etc.

It will be interesting to read the comments on this early version but it's not really “released” yet.