Discussion on: What tools would you choose to create a personal portfolio site if starting from scratch?

[JoelBonetR 🥇]

I would suggest to use styled-components instead Tailwind. It's not necessary to explain the reason if you try it for 30min 😁

[Matthew Daly]

I've already tried them and preferred Tailwind.

[JoelBonetR 🥇]

Reason?

• With both you reach non-unused css code.
• tailwind has big coupling with HTML/JSX whereas Styled Components has almost none.
• Styled Components allows extension with JS template strings.

[Matthew Daly]

• Not exactly sure what you mean by "tailwind has big coupling with HTML/JSX whereas Styled Components has almost none", but if you mean the fact that it's embedded in the HTML and JSX, that's a good thing in my opinion. Both are facets of presentation of content, and logically they belong together. And if you need to strip out all the styles and start from scratch, that's trivial to do with a simple regex when using Tailwind
• It's easy to extend Tailwind if you need to, just by updating one simple Javascript config file. But it's very rare to actually need to - the defined classes are very well chosen and cover almost every situation I need, and are named logically and consistently
• I can use it in any front end templating system I like - it's useful in Vue components, Laravel Blade templates, or PHP template files, as well as in React
• The elimination of context switching between CSS and JSX or other templating solutions means I can style something much more quickly than I could with any solution that involves writing CSS more directly. Even if it's done within the same file, it slows me down to switch my mental context between JSX and CSS, but with Tailwind I never have to do that
• The tooling is solid. I use the Tailwind LSP server in Neovim for completion and it's extremely helpful
• By limiting things like width, height, margin etc to a limited subset of presets, it makes it much easier to maintain consistency across a project, without making everything same-y like Bootstrap often does. But it's easy to amend the existing presets or add your own ones
• Even with CSS-in-JS solutions it's possible you may wind up with unused CSS embedded in a component - it's less likely than with separate CSS files, but not impossible. That doesn't happen with Tailwind
• If there are certain repeated patterns in your styling and you're not using a component library like React, it's easy to extract them using the apply directive
• It's far, far quicker to get up to speed on a new project because I know what the defaults for Tailwind are and what they do, and from the classes on an element I can get a pretty good idea what it looks like without even seeing it in the browser

[JoelBonetR 🥇]

• Learning curve: You need to learn Tailwind Syntax, while you use either standard CSS or SCSS inside styled-components.
• Following the previous one, tailwind leads you to learn the CSS API the bad way, so you'll struggle when jumping into a project that does not use tailwind. i.e. `font-semibold` is not the same as `font-weight: 600;`
• Extensibility and dynamism: Styled components declare styling using JS template strings, which mean you can pass props and do things like that:

const Paragraph = styled.p`
  font-weight: bold;
  flex: 0 1 100%;
  text-align: ${(props) => props.align};
`;

<Paragraph align='center'> My centered text </Paragraph>
<Paragraph align='left'> Left text on this one </Paragraph>
<Paragraph align='right'> Right align for the last one </Paragraph>

So you can have props that are common to all paragraph components pre-set while adding parametrization just in what you really need.

It also works with React states so you can have a component that changes it's background-color depending on a state, as example.

• The everything is a component approach on styled-components enforces re-usability of components and SOLID principles while tailwind does the opposite and promote code repetition (by classnames).
• Reading templates with Tailwind is a hell, most of the time I need to scroll to the right even having a QuadHD screen to read the entire line or making it break to multiple lines. (I'm not sure about which of those is worse, I simply hate both).

There are more reasons not just those but I think it's enough to catch the idea about why Tailwind is marginally used in the industry at a professional/business level.

There's no single software architect I talked to about that which puts tailwind as first option to use and I agree for many reasons (including maintainability and speed of change things on a solid way).

Maybe if you are a backend dev that don't care much about front for any reason or you are just printing your templates from a server side application (¿is there anyone still doing that in 2022?) tailwind will be a no-brainer on that as it was bootstrap back those days.

[Matthew Daly]

Let's take this one by one...

Learning curve: You need to learn Tailwind Syntax, while you use either standard CSS or SCSS inside styled-components.

No, you don't. It's a relatively small number of class names which are internally consistent, descriptive, and intuitive, and can be easily autocompleted with an appropriate LSP server. If anything it's easier to learn than CSS.

Following the previous one, tailwind leads you to learn the CSS API the bad way, so you'll struggle when jumping into a project that does not use tailwind. i.e. font-semibold is not the same as font-weight: 600;

Which is a complete non-issue as I've been in the industry for over a decade and already know CSS. I'm full stack so CSS isn't my primary focus, but I'm certainly not going to struggle with basic stuff like that.

Extensibility and dynamism: Styled components declare styling using JS template strings, which mean you can pass props and do things like that

But you still need to define them inline of the components, so it's easier for different components to get out of sync. Using a much more limited pool of utility classes means it's easier to avoid the situation where one component has 3px padding, another has 2px padding etc.

The everything is a component approach on styled-components enforces re-usability of components and SOLID principles while tailwind does the opposite and promote code repetition (by classnames)

I don't buy this at all. The class names are simple, logical and consistent, and tell you exactly what they do, which is generally one thing and one thing only. They are not repetitive at all.

If you're repeating the same stuff over and over it suggests to me that something needs to be refactored out into its own component. And if it does get too repetitive in one component, you always have the option of using the apply directive.

Reading templates with Tailwind is a hell, most of the time I need to scroll to the right even having a QuadHD screen to read the entire line or making it break to multiple lines. (I'm not sure about which of those is worse, I simply hate both).

I don't have an issue with this. I use Neovim and it wraps the lines fine for me. I've used VSCode a little in the last few years too and didn't have an issue with it there either.

There are more reasons not just those but I think it's enough to catch the idea about why Tailwind is marginally used in the industry at a professional/business level.

This is not only extremely patronising, but complete and utter nonsense.

I work for a digital agency which is owned by a pretty large global network of digital agencies, and is listed on the FTSE. Hundreds of people work for that agency, and thousands for the network, so we're not talking a tinpot little agency. And we use Tailwind pretty much exclusively on new projects. Furthermore, of the other developers I've worked with in the past at my current or previous employers who I'm still in contact with, probably a majority of them use Tailwind these days, including plenty with a greater focus on front end development than I have. And from the buzz I hear about it on social media, and mention of it in job adverts, it's widely used elsewhere.

There's no single software architect I talked to about that which puts tailwind as first option to use

I find this very hard to believe based on my own experience. I would suspect that the people you asked haven't actually tried Tailwind for long enough to make a remotely informed decision about it, or are one of the people who think it's the same thing as inline CSS.

Maybe if you are a backend dev that don't care much about front for any reason

Again, this is deeply patronising. Of course I care about the front end. Having developed Phonegap apps in the past, while working at a small agency where I didn't have any front end support, I've had to build out a nice, usable interface on many occasions.

or you are just printing your templates from a server side application (¿is there anyone still doing that in 2022?)

Are you kidding me? Like I said, I work for a big digital agency network and that is still the majority of what we do, and will be for the foreseeable future. Things like Next.js are useful, but for a lot of real world stuff server-side rendering with a framework like Laravel makes far more sense.

tailwind will be a no-brainer on that as it was bootstrap back those days.

This is not only extremely patronising, but flat out wrong. Tailwind simply doesn't work like Bootstrap, and none of the things I've used it for have ended up looking same-y. It's a very different beast to Bootstrap and if you know it at all (and it's easy to learn) you can produce a decent UI for basically anything you like without each site looking the same.

My front-end colleagues who work with it far more than I do and push it further than I ever do feel the same way.

[JoelBonetR 🥇]

Did you notice that I'm speaking on the overall technology and not about my/your experience?

It's not about my or your personal preference but somthing than can be better or worse depending on the situation or what you want to achieve

[Matthew Daly]

Did you notice that I'm speaking on the overall technology and not about my/your experience?

No, you really obviously weren't. You're clearly now trying to shift the scope of the discussion to make it sounds like I was talking solely about my experience, which I wasn't. I work with a team of other developers and I often have to make decisions when choosing a stack that go against my personal preferences and since I'm a grown-up I have no ego about doing so.

Since you're obviously not arguing in good faith I'll bid you good day and leave it there.

[Juan A. Fuentest Torcat]

If any of you were actual grown ups you would be arguing vim vs emacs

[JoelBonetR 🥇]

😂😂😂😂😂

[Pierre-Henry Soria ✨]

Yep, good one 😁