Beginner-friendly guide to use Tailwind CSS with Jekyll

https://mzrn.sh/2022/04/09/starting-a-blank-jekyll-site-with-tailwind-css-in-2022/

by mzrnsh • 4 years ago

56 31 4 years ago

mzrn.sh

mzrnsh3• 4 years ago

I love building websites the old-fashioned way: with Jekyll.

But I also love styling them with a bit modern approach: Tailwind CSS.

So I posted a guide on how to make those two work together.

petecooper• 4 years ago

I love building websites the old-fashioned way: with Jekyll.

I suddenly feel very, very old.

mzrnsh3• 4 years ago

Huh, that was half a joke. But check this out: https://twitter.com/jspeiser/status/1519816372179673088

faebi• 4 years ago

Random rant: I still don‘t get it. Why is inline CSS supposed to be bad but tailwind is supposed to be fine? And yes, inline CSS lacks features like hover and predefined color palettes. Personally, these days I‘m lost in between them all and have started using them all; a framework like bootstrap, some handy thing like tailwind with a prefix and inline CSS for anything I feel like. Did I mention that I like !important ?

So, time to go to hell for saying all of that.

Brajeshwar3• 4 years ago

Here is my thought process, but take it lightly as I have not been part of front-end teams for quite a long time. It is more about how your code modules are organized, for what purpose, and how it will be managed.

I would say go bang-bang with all the classes for Marketing/Landing Pages and websites that will change regularly both in code and final designs.

Now, for a user logged in WebApp where many engineers (front + back) will work but want to leverage TailwindCSS without having to write everything from scratch, leverage its capabilities, but start writing your classes -- use TailwindCSS as a utility.

TailwindCSS makes it easy to get in new members to the team, and even new developers, just like Bootstrap does. It gives you the advantage of using it as your tamed tooling, complete with sharable design tokens between designers, the front-end, and the back-end.

wildrhythms• 4 years ago

Imagine you have 100 Jekyll templates that all contain a few dozen instances of <div style="display: flex; ..."> don't you feel you're wasting some bandwidth by not creating a .flex { display: flex; } class to handle that common case? This is all Tailwind is doing.

Existenceblinks• 4 years ago

Everyone is tired of defending "inline style" for a long while now. It has `hover:bg-gray400` and thing like `md:w-1/3` and some fancy animation too. I think they should start creating 2-3 properties size classes more, currently it's mostly 1:1.

ushakov3• 4 years ago

in my experience things like Tailwind are mostly pushed by managers, not developers

the managers see how simple it is to build complex UIs in Tailwind and then project it into how much resources they can save their company and how quickly they'll be able to iterate on design

a major problem with projects that are built with tailwind is that the code produced is unmaintainable, unreadable spaghetti

you can even see it on their own home page if you scroll down a couple sections

https://tailwindcss.com

tailwind also requires a build system and introduces 500+ npm dependencies, which is a huge security risk

personally i think Tailwind is a solution looking for problem and would avoid it at all costs

notjustanymike• 4 years ago

Tailwind employs utility CSS methodology, but it's not equivalent to inline. It standardizes your core elements (colors, font sizing, spacing) which ensures the consistency of a framework mixed with the flexibility of inline.

Any reused styles (eg button) should be turned into a class via composition.

So it's flexible, but also ensures adherence to your company design standards.

Brajeshwar3• 4 years ago

Nice Tutorial. Here is my go-to for Jekyll and TailwindCSS -- Jekyll Starter Tailwind[1] by Taylor Bryant.

1. https://github.com/taylorbryant/jekyll-starter-tailwind

mzrnsh3• 4 years ago

Looks good, I had a similar setup with Gulp up until last year.

But isn't this a bit outdated now? I think it still uses Tailwind CSS 2.

Brajeshwar3• 4 years ago

Being a Starter Kit, it helps compile Tailwind and then remove the un-used CSS. It does not matter if you use Tailwind 2 or 3, it should work.

The idea is that Jekyll is Ruby while the way Tailwind is setup (usually) is easier managed by the available NPMs. This kit makes it easy to marry the two.

I like it as this is simpler than the others I had seen, nothing more than the bare needed to get the work done.

cehrlich• 4 years ago

Not entirely on topic, but is there anything like a “generic component library” that just gives accessibility and has as little opinion about design as possible, but can them be styled with Tailwind?

I think Tailwind is a great way to get a good looking site very fast, but I’d rather use eg a Toggle component that someone else built and tested than create my own and inevitably make some kind of accessibility mistake.

sp33der89• 4 years ago

I personally like and use DaisyUI for such "components" type of things: https://daisyui.com/

Does its job, gets out of my and helpful docs as well.

lobstrosity420• 4 years ago

Yes, there are tons of those now. No doubt because of the popularity of things like Tailwind. This one is particularly popular: https://headlessui.dev/

johtso• 4 years ago

Maybe check out the recently released Zag that uses state machines under the hood to target multiple front end frameworks: https://zagjs.com/

throwingrocks• 4 years ago

https://react-spectrum.adobe.com/react-aria/

frosted-flakes2• 4 years ago

It's a cool idea and I was excited about it at first, but that library is so hard to work with. Way too many layers upon layers of abstraction, and it relies very much on an implicit, nested API that makes it hard to suit your own needs (for your own component's API). Also, the API docs kind-of suck—the docs are good at giving a general overview, but finding specifics about what a particular function returns inevitably seems to require digging into the source code (maybe that's changed, it's been about a year since I tried it).

Horrible experience.

frosted-flakes2• 4 years ago

I've gone in the other direction and write plain HTML tags now (in React, or anywhere), then augment it with functionality by passing a reference to the relevant element to a helper class. Very much like A11yDialog[1], which is likely the most well-known example of this concept. The helper class is vanilla Javascript and the API of the class is the DOM itself: if you don't use the correct aria-x and role attributes, it will warn you.

I do this because I hate dealing with the opaqueness of UI components. Every one has its own completely different API, every one imposes unnecessary constraints, and styling them requires you to submit to whatever styling method the library author thinks is best. I just want to have direct control over the DOM dammit! without having some busybody middleman library getting in the way.

This approach makes it very easy to, for example, have a menu button and its menu in completely different parts of the tree, making styling effortless. The helper class handles focus management, so the exact HTML isn't important, as long as the correct attributes are present.

[1] https://a11y-dialog.netlify.app/

pictur• 4 years ago

https://www.radix-ui.com/

chrisweekly• 4 years ago

Radix is pretty close

nextrandomuser• 4 years ago

Plain UI was created with that idea in mind, and it's available in Tailwind, Bootstrap and Bulma!

https://shuffle.dev/blog/2022/01/plain-ui-simple-template-fo...

Beginner-friendly guide to use Tailwind CSS with Jekyll

Related Stories