Here is a simple demo to leverage the benefits of Tailwindcss in Jekyll.
I've been searching for a demo, and I found some examples, but it was often deprecated or not working at all.
I did my demo:
Tailwindcss for Jekyll
Here is a simple demo of Tailwindcss 3++ in Jekyll with sass
How to use it
- clone the repository
- cd jekyll-tailwindcss
bundleto install jekyll dependencies
yarnto install node modules
bundle exec jekyll serveto run a local server
Here is the final build command:
JEKYLL_ENV=production jekyll build
If it does not work, try:
JEKYLL_ENV=production bundle exec jekyll build
Alternatively, you can use
yarn dev and
Styles are from https://tailwindcomponents.com/component/card-hero-section
Tailwindcss is a CSS framework with a vast API surface. The idea is to abstract redundant CSS rules from developers, so you only have to set some configurations and use HTML classes to get a nice and clean UI.
We use several resources in addition to Jekyll itself. The most critical files are
tailwind.config.css. In this demo, it's pretty basic but working.
I've also used the card hero component from tailwind components.
Hopefully, it will help you setup Tailwindcss with Jekyll. I've added all the necessary instructions in the README file, but if you have questions or something to add, do not hesitate to raise an issue and even make pull requests.
Not at all for the first question, and also no for the second.
I've included the
sassc gem to improve builds, but it's just a way to use Tailwindcss in Jekyll. There are other approaches.
Besides, even if Tailwindcss is promising, it's not the perfect tool. Nothing is perfect. You have to use many classes and divs to get your UI, which is not necessarily ideal.
In that perspective, it's similar to Bootstrap, but it's a pretty different approach, and it's significantly lighter with the built-in purge CSS.
However, you won't find the same amount of tutorials and freebies. Indeed, Tailwindcss is still young, and the documentation is fantastic, and this post on dev.to will give you A LOT of useful links.
I still see Tailwindcss as a niche market, but that does not mean it's not useful. It's especially appropriate for those who do not want all the things but need good practices, easy layouts, and quick time to market.
IMHO, it's an outstanding contribution to the web, and it might help a lot of people to build their app and deliver.