Integrate Tailwind CSS into a Wordpress Theme • VIARAMI

Since I discovered the Tailwind CSS framework, I have used it for some of my Vue.js and Nuxt.js projects. I have also documented some projects here on VIARAMI. It allows me to quickly and easily turn visual ideas into concrete CSS code.

Now I wanted to use Tailwind for some of my WordPress projects and their themes. But this turned out to be more difficult than expected.

For WordPress and the development of themes there are no fixed processes, as it is the case with Javascript frameworks. This has the advantage that you have a lot of freedom, but there are also no standard possibilities for the imagination of frameworks.

Of course there would be the possibility to simply include the CSS file of Tailwind into the theme. But this has the disadvantage that all classes are in the file, even the unused ones, and so the file is unnecessarily large. Furthermore, it is not possible to use these classes in a separate file.

What now? After an intensive search I found some examples for the use of Tailwind in a WordPress Theme. But here I used additional technologies that I don’t need and some of them were very confusing and connected with dependencies.

So I had to find my own method for integrating Tailwind CSS into a WordPress Theme. It is certainly not the most elegant one and it could certainly be improved, but it is the most minimal invasive method I could find. It also allows to integrate it into existing code without changing the structure too much.

So here is the step-by-step guide for integrating the Tailwind CSS framework into a WordPress theme.

For this tutorial I use a fresh starter theme, but the tutorial can also be applied to existing themes. You can find the whole code on Github.

Tutorial

First we have to set up npm and enter the following code via the command-line in the directory of the theme.

npm init

Now we can install other required packages.

npm install @fullhuman/postcss-purgecss cross-env tailwindcss autoprefixer postcss-cli --save-dev

Now there should be a package.json file and a node_modules folder in the directory. Depending on how you upload your themes to the production server you should remove them later.

The package.json file should now look something like this.

{
  "name": "akiko",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "VIARAMI",
  "license": "ISC",
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "autoprefixer": "^9.8.6",
    "cross-env": "^7.0.2",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.7.6"
  }
}

npx tailwindcss init

This command creates a configuration file for Tailwind. Here you can later globally change colors, distances and more. For now we only change purge to false. The tailwind.config.js file will look like this.

module.exports = {
  purge: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Now we come to a crucial point, the configuration of PostCSS. We create a new postcss.config.js. PostCSS generates the later CSS file. In this step we also remove the unnecessary classes. PurgeCSS searches all .php, .js and .html files in the folder.

const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),
    require("autoprefixer"),
    process.env.NODE_ENV === "production" &&
      require("@fullhuman/postcss-purgecss")({
        content: ["./**.php", "./**/**.php", "./**.html", "./**.js"],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      }),
  ],
};

In the order assets/css/ (this can be chosen freely) we now create a Tailwind.css file. Here we use the @Tailwind directive to inject the base, components and utilities of Tailwind.

@tailwind base;
@tailwind components;

/* purgecss start ignore */
/* purgecss end ignore */

@tailwind utilities;

This is also the place where additional classes can be created and not as usual in the style.css. Speaking of style.css, the CSS from this can be removed, otherwise there will be conflicts.

To create our CSS file we need a script. More precisely, we add two scripts to the package.json.

 "dev:css": "postcss ./assets/css/tailwind.css -o ./assets/css/main.css",
 "build:css": "cross-env NODE_ENV=production postcss ./assets/css/tailwind.css -o ./assets/css/main.css"

These two commands create a main.css in the folder of tailwind.css This must now be included in WordPress.

 
wp_enqueue_style('akiko-tailwind', get_template_directory_uri() . '/assets/css/main.css', array() );

Two commands are now available for selection. With “npm run dev:css” a main.css file is created with all CSS classes of Tailwind with a size of 2.4 MB. It is good for development, because you can use all features. With “npm run build:css” the CSS file for the public page is created. It contains only those parts of Tailwind that are needed. If you use new classes, like bg-red-400, you have to regenerate the main.css.

Now we have integrated Tailwind CSS into a WordPress theme. The sample code for this tutorial is on Github.

Now you can start to design the theme according to your wishes. Here you can use the classes directly in the theme and the .php files or you can use the tailwind.css file.

Tutorial

Related Posts