How to set up Tailwind CSS for WordPress

#

Spis treści

It may seem unbelievable but I first heard about Tailwind CSS just today. It got me interested to the degree that I have spent the whole day playing with it. Tailwind is revolutionary, it’s very simple (after you go through the installation), you will never want to go back to Sass or anything other.

Before we start you will need:

  1. Local server (php, apache and MySQL)
  2. Node.js
  3. WordPress installed

Setting up a theme

Go to underscores.me, type in you theme name and press Generate.

Copy the downloaded .zip file to /wp-content/themes/ and extract it. Make sure you end up with a folder in which there is a bunch of files.

Open your new theme folder in your code editor and enqueue our css and js in the functions.php file like this:

add_action( 'wp_enqueue_scripts', 'enqueue_function', 10 );
function enqueue_function() {
    wp_enqueue_script( 'main-bundle', get_template_directory_uri() . '/assets/dist/main.bundle.js', array(), '1.0.0', true );
    wp_enqueue_style( 'tailwind', get_template_directory_uri() . '/assets/dist/main.css', '1.0.0', true );
}

Now in your top theme folder create an assets folder, and inside it two folders named src and dist. Inside the src folder create two files: index.js and main.css. The .js file is just for convenience, so that you don’t have to look for another tutorial on how to set up javascript bundling.

Installing necessary packages

  • Webpack
  • css-loader
  • postcss and postcss-loader (let’s you use modern css language that is not supported in the browsers)
  • Tailwind CSS
  • Autoprefixer
  • mini-css-extract-plugin

Open your terminal/command prompt and run this:

npm install -D webpack webpack-cli
npm install -D css-loader postcss-loader

This will install webpack and useful commands that go with it and the loading scripts that will actually create our files, now run this:

npm install -D [email protected] [email protected] [email protected] [email protected]

At this point you have everything you need installed.

Creating config files

Now create the actual webpack.config.js file in the root of your theme and put this object inside it:

const path = require( 'path' );
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: "development",
    context: path.resolve(__dirname, "assets"),
    output: {
        filename: 'main.bundle.js',
        path: path.resolve(__dirname, "assets/dist"),
    },
    watch: true,
    plugins: [
        new MiniCssExtractPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node-modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                    },
                ],
            },
        ],
    },
}

Now create a tailwind.config.js file and put this object inside:

module.exports = {
  purge: [],
  darkMode: false, //you can set it to media(uses prefers-color-scheme) or class(better for toggling modes via a button)
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

This will be the file where you configure your tailwind setup.

And one last file postcss.config.js, and inside it:

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.config.js'),
        require('autoprefixer'),
    ]
}

Now in the /assets/src/main.css file put this:

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

Adding a start script to npm

Open package.json file and modify the scripts object to add a start script and tell it to run webpack:

"scripts": {
    "start": "webpack --config webpack.config.js",
    "watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
    "compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
    "compile:rtl": "rtlcss style.css style-rtl.css",
    "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
    "lint:js": "wp-scripts lint-js 'js/*.js'",
    "bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map"
  },

By now everything should be working fine, run this in the terminal to initialize everything:

npm run start

Now you can just into the real fun, start using Tailwind classes wherever you want!

Mike Kuczek

Mike Kuczek

WordPress developer, designer, psychology student and bluberry farmer. CEO of Biiird Studio.
❤ SHARE, THANK YOU ❤
Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on email

Mike’s story

I was born in a small village in the midst of Poland. The whole Kuczek’s family was working in the public field to promote healthy

[wbcr_php_snippet id="820"]

Leave a Comment

Your email address will not be published. Required fields are marked *

Zasób 1

Switch to Polish: 

Ta strona korzysta z plików cookie, korzystając z niej zgadzasz się na ich wykorzystanie. Więcej informacji.