read

¡Tailwind CSS! A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

This is how their website says it and the truth is that it works wonders. At Frontier Themes we love Tailwind CSS, we love using it, and in this article, we are going to see how we can implement it when we are developing themes for Grav CMS.

At the time of writing the most recent version of Tailwind CSS is version 3. We assume that we already have a Grav CMS installation ready in our local development environment, and we also have the following development tools installed:

  1. The Grav CMS Devtools plugin.
  2. NodeJS.

Then from the root of our Grav installation, we run the following command:

$ bin/plugin devtools new-theme

We answer all the questions we are asked, namely:

  1. Theme Name.
  2. Theme Description.
  3. Developer Name.
  4. GitHub ID.
  5. Developer Email.

Finally, it will ask us to choose an option from among the following:

  • pure-blank
  • tailwind
  • inheritance
  • copy

As we can see, the second option is tailwind. At Frontier Themes we do NOT recommend choosing that option as the package.json file it currently brings includes an outdated version of Tailwind CSS and some of its plugins, and it's a bit cumbersome to update them. Instead, we'll choose the first option pure-blank, and implement Tailwind CSS from scratch.

After having finished the process of creating a new theme we will see something like the following:

ABOVE: success message when creating a new theme with the pure-blank option. We have named our theme Tailwind CSS theme.

The option pure-blank includes the Pure CSS framework. As we are interested in using Tailwind CSS we must remove the reference to Pure.

To do this we will open the newly created theme in our favorite text editor, and look for the base.html.twig file that is in templates/partials. In this file we will look within the tags <head></head> for the following code extract:

{% block stylesheets %}
    {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}
    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
    {% do assets.addCss('theme://css/custom.css', 98) %}
{% endblock %}

And we will remove the reference to Pure, that is, the following line:

{% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}

Additionally, we recommend deleting the contents of the custom.css file since the styles declared there could interfere in some way with the Tailwind CSS styles.

In the end, the code block should look like the following:

{% block stylesheets %}
    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
    {% do assets.addCss('theme://css/custom.css', 98) %}
{% endblock %}

We have only left the reference to Font Awesome (although we also recommend deleting it since it is an outdated version of the library). You might as well reference the latest one from a CDN provider like CDNjs or JSDELIVR, if you are going to use it in your theme.

Tailwind CSS Time

The easiest way to implement Tailwind CSS is through its CLI. To do this, from the root of our theme we will run the following commands (this is when it is important to have NodeJS installed):

$ npm init -y

This will create the package.json file that we will use to maintain our dependencies. The flag -y makes all the questions that are asked during the process be automatically answered with yes. If you want to answer each of the questions manually do not type the flag -y.

Then we run:

$ npm install tailwindcss --save

When the process is finished we will have Tailwind CSS installed.

Finally, we run the following command:

$ npx tailwindcss init

This will create the tailwind.config.js configuration file. In this file we must indicate the paths of the HTML files where the Tailwind CSS classes will be used, being as follows:

module.exports = {
    content: [
        './templates/**/*.html.twig'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

In the above configuration, we are instructing Tailwind CSS to scan all the .html.twig files within the templates folder of our theme. Depending on how we work our HTML we can also configure Tailwind to scan javascript files for example.

Now it's time to create our main CSS file where we will place the Tailwind directives. For this guide we will create it directly at the root of our theme and name it input.css, being as follows:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, we will run the following command for the CLI tool to scan the files and build the final CSS file:

$ npx tailwindcss -i input.css -o output.css --watch

In the previous command, we have named output.css to the file that will contain the CSS that we will use in our theme. The --watch flag makes the CLI keep track of changes to our files to rebuild the final CSS file. If we do not use the --watch flag we would have to run the command every time we make changes to our files.

We only have to call the output.css file in our theme. To do this we go back to the base.html.twig file which should be as follows:

{% block stylesheets %}
    {% do assets.addCss('theme://output.css', 100) %}
    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
    {% do assets.addCss('theme://css/custom.css', 98) %}
{% endblock %}

And with this, we have included the most recent version of Tailwind CSS in our Grav CMS theme.

What if I'm using tools like Webpack or Rollup?

For this, we must use Tailwind as a PostCSS plugin. At Frontier Themes we recommend checking the excellent Tailwind CSS documentation for these use cases.

Until next time.

Blog Logo

Arturo Guillén


Published

Image

Frontier Themes

Back to Overview