Feature Request: railwind integration

[AlistairKeiller]

It seems like many people use Tailwind CSS in Zola, given the number of themes that use it and GitHub issues that talk about it, and the options for using Tailwind with Zola are their very bulky CLI tool binary or adding PostCSS and Tailwind to the project with npm. This is a bit of pain and the inability to use an atomic CSS engine is a limit of Zola in its single binary state.

Would practical to add railwind?

[AlistairKeiller]

It does seem like there is some recent support for this in the discourse. Is worth starting on a PR?

[Keats]

How would that integration looks like? I don't use tailwind

[AlistairKeiller]

Tailwind will dynamically generate the necessary CSS for the utility classes used in the HTML, which allows it to have much more fined grained control with classes than something like Bulma; Tailwind has megabytes worth of possible classes, but the final size is reasonable because only generates the ones you need.

For example

<div class="dark:bg-slate-800"></div>

will generate the CSS

@media (prefers-color-scheme: dark) {
  .dark\:bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity));
  }
}

So the tailwind integration that it seems like most Zola users currently use is adding a watcher on the templates directory with PostCSS to generate the necessary tailwind.css in the static directory.

A railwind integration could look like an option in the configuration file to generate a tailwind.css file at the desired directory, defaulting to static/tailwind.css, from all of the HTML in the templates directory. There should also be an option to enable or disable Tailwind Preflight to be added to the tailwind.css, which is a CSS reset provided by Tailwind and Railwind that is commonly used among Tailwind users.

[Keats]

So the tailwind integration that it seems like most Zola users currently use is adding a watcher on the templates directory with PostCSS to generate the necessary tailwind.css in the static directory.

That would still be necessary for anyone using plugins right? How does that work with @apply and other PostCSS features? My understanding of Tailwind is that it's rarely used vanilla with just the default classes names

[AlistairKeiller]

Yes postcss will still be necessary for some plugins. But, for example, railwind has support for the typography classes that are provided by the tailwind typography plugin and are useful for documentation. The functionality already there should cover the vast majority of use cases.

I am not sure what you mean that tailwind is not used vanilla. Many people configure it with in the tailwind.config.js. Railwind’s support of which is in progress.

Yes, right now railwind will not work for more advanced postcss features like @apply, but current should cover the vast majority of use cases. Also directive support is in the works for railwind: pintariching/railwind#19.