6 ms·

Beginner-friendly guide to use Tailwind CSS with Jekyll

56 points by mzrnsh 4y ago

mzrnsh 4y 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 4y ago
  >I love building websites the old-fashioned way: with Jekyll. I suddenly feel very, very old.
  - mzrnsh 4y ago
    Huh, that was half a joke. But check this out: https://twitter.com/jspeiser/status/1519816372179673088 https://twitter.com/jspeiser/status/1519816372179673088
    - vmception 4y ago
      “Anybody born in the 1900s” is a fun meme to trigger people
- faebi 4y 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.
  - wildrhythms 4y 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.
    - nickjj 4y ago
      gzip is remarkably efficient to reduce duplicate repeating strings. You could have 10 classes or raw styles repeated 50 times and all instances of those might condense down to 1 string of WWUElinMSS1J1TQwMFFISi7KtsMiZAuVKU.
  - Brajeshwar 4y 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.
  - Existenceblinks 4y 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.
  - ushakov 4y 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 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
Brajeshwar 4y 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 https://github.com/taylorbryant/jekyll-starter-tailwind
- mzrnsh 4y 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.
  - Brajeshwar 4y 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 4y 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.
- nextrandomuser 4y 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-for-tailwind-bootstrap-and-bulma/ https://shuffle.dev/blog/2022/01/plain-ui-simple-template-fo...
- sp33der89 4y ago
  I personally like and use DaisyUI for such "components" type of things: https://daisyui.com/ https://daisyui.com/ Does its job, gets out of my and helpful docs as well.
- lobstrosity420 4y 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/ https://headlessui.dev/
- johtso 4y ago
  Maybe check out the recently released Zag that uses state machines under the hood to target multiple front end frameworks: https://zagjs.com/ https://zagjs.com/
- throwingrocks 4y ago
  https://react-spectrum.adobe.com/react-aria/ https://react-spectrum.adobe.com/react-aria/
  - frosted-flakes 4y ago
calltrak 4y ago

56 points by mzrnsh 4y 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 4y ago
>I love building websites the old-fashioned way: with Jekyll. I suddenly feel very, very old.
- mzrnsh 4y ago
  Huh, that was half a joke. But check this out: https://twitter.com/jspeiser/status/1519816372179673088 https://twitter.com/jspeiser/status/1519816372179673088
  - vmception 4y ago
    “Anybody born in the 1900s” is a fun meme to trigger people
faebi 4y 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.
- wildrhythms 4y 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.
  - nickjj 4y ago
    gzip is remarkably efficient to reduce duplicate repeating strings. You could have 10 classes or raw styles repeated 50 times and all instances of those might condense down to 1 string of WWUElinMSS1J1TQwMFFISi7KtsMiZAuVKU.
- Brajeshwar 4y 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.
- Existenceblinks 4y 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.
- ushakov 4y 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 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

Brajeshwar 4y 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 https://github.com/taylorbryant/jekyll-starter-tailwind

mzrnsh 4y 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.
- Brajeshwar 4y 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 4y 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.

nextrandomuser 4y 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-for-tailwind-bootstrap-and-bulma/ https://shuffle.dev/blog/2022/01/plain-ui-simple-template-fo...
sp33der89 4y ago
I personally like and use DaisyUI for such "components" type of things: https://daisyui.com/ https://daisyui.com/ Does its job, gets out of my and helpful docs as well.
lobstrosity420 4y 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/ https://headlessui.dev/
johtso 4y ago
Maybe check out the recently released Zag that uses state machines under the hood to target multiple front end frameworks: https://zagjs.com/ https://zagjs.com/
throwingrocks 4y ago
https://react-spectrum.adobe.com/react-aria/ https://react-spectrum.adobe.com/react-aria/
- frosted-flakes 4y ago

calltrak 4y ago