Tailwindcss

Algaris · 2020-11-30 14:45:21

I’ve been reading through Destry’s font sizing thread and found the discussion regarding tailwindcss fascinating. So as not to derail things I thought I’d start a new thread.

Tailwind has been on my radar for a while now but I’ve never had the time to look at it apart from skimming through the documentation.

I was wondering what peoples thought are and wether it’s a good fit for me. At work I have to use Bootstrap for two projects and this won’t change for the foreseeable future but for personal and other work related projects maybe I should give tailwind a look in.

The main issues I see for me is that I really enjoy writing SCSS and CSS. With Bootstrap I customise everything, changing the styles for cards, buttons, dropdown, alerts, brand colours etc (although I do often feel like I’m fighting against Boostrap’s design choices). Whereas with tailwind I get the impression that you’re actively discourage from writing CSS. Is this really the case and if I did want to override tailwinds default styles with my own CSS/SCSS how easy is it to do so? I’m mainly used to working with SCSS but I get the impression that tailwind doesn’t use it.

philwareham · 2020-11-30 17:29:45

Algaris wrote #327172:

The main issues I see for me is that I really enjoy writing SCSS and CSS.

You have kind of answered your own question a bit :) Tailwind’s main strength is that you essentially don’t need to write CSS in order to build a site with it (within reason). Instead, you sprinkle a collection of utility class names into your HTML elements and off you go (a.k.a Atomic CSS).

You can inject your own CSS into the final stylesheet during the build/compile process, although that isn’t a headline feature of the framework. You’d have to set up the preprocessor yourself and integrate it with the PostCSS setup that Tailwind uses, via your choice of build tool (Webpack, Grunt, Gulp, Rollup, etc).

There’s pros and cons to this concept, the biggest advantages being you can get a layout built quickly (especially for an outline or wireframe) and the given design is nice (if a little sterile). Another advantage might be if you work as part of a team on an enterprise-level website, where you can all share this common set of components without too much issue of people writing duplicated code and/or breaking other code with your manual CSS additions.

The main con is that the HTML is heavily polluted with class names – and you may need to style each component in isolation, as the cascade can be difficult to maintain in a simple fashion (you’ll need to scan back though your HTML nesting sometimes to see where the CSS was declared).

I also worry that future maintenance of large sites could be an issue – you are pretty much locked into the Tailwind ecosystem once you’ve started using it on a site. A move away from the framework is going to mean a total rewrite of your site HTML, but that’s true of most frameworks and site redesigns I guess.

Personally I’m not a massive fan of the Tailwind concept, but then my main frontend work is writing actual CSS so I may be biased – and I also generally don’t get too involved in enterprise-level sites if I can help it (the only enterprise site I work on routinely was built by other developers over many years).

TLDR; if you are happy writing your own CSS and your sites are of a modest size – this might not be the best fit for you. My take is to learn the best bits of a framework and incorporate those into my own codebase.

Algaris · 2020-12-01 12:36:59

Thank you Phil. It looks like Tailwind isn’t a good fit for me then. I’m still intrigued by it on an academic level so I might read up on it some more and if I feel inclined experiment with it a little on my local dev server. As for using it for any projects, probably not.

To be honest I find I struggle with most frameworks. I want to style things my way and not have a cookie cutter clone site. I often find I’m fighting against the design choices made by the developers for simple things like changing a frameworks colour scheme, buttons, and cards, etc.

I think you might be onto something with just taking the best bits from different frameworks and building my own codebase.

Last edited by Algaris (2020-12-01 12:39:05)

Textpattern CMS

Textpattern CMS support forum

#1 2020-11-30 14:45:21

Tailwindcss

#2 2020-11-30 17:29:45

Re: Tailwindcss

Algaris wrote #327172:

#3 2020-12-01 12:36:59

Re: Tailwindcss

Board footer