Simple Tailwindcss starter guide

A very small guide to Tailwindcss and how to get started.

Installation of Tailwindcss in a new project

First of all: the official documentation can be found here.

  1. Install Node.js on your machine.
  2. Run npm init -y to create a package.json file.
  3. Next we execute npm install -D tailwindcss to install the Tailwind dependency.
  4. Next, we need to run npx tailwindcss init to create a tailwind.config.js file.
  5. Next step is to add the following line to the content section to the tailwind.config.js file, under the module.experts content section. (see picture 1)
    "./*.{html,js}"
  6. Create an input.css file and paste the following in it:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  7. Add the following scripts to the package.json file (see picture 2):

    "build": "tailwindcss -i ./input.css -o ./css/style.css",
    "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch"
  8. You can now run these scripts using npm run watch. Make sure to run the npm run build command right now!

Picture 1: the basic Tailwindcss config file.
Picture 2: running scripts defined in the tailwind.config.js file.

Add some tweaks to Tailwindcss

Directives and functions

You can add your own at-rules do simply add your customization to the directives. Create combinations and add them to the respective directive like this:

Picture 3: changes to h1 using directives and at-rules.

You can also combine existing Tailwind classes and create a new component:

Picture 4: adding custom classes to the component directive.

Furthermore, you can use parameters in your tailwind.config.js file and later retrieve those values from CSS:

Picture 5: add a spacing parameter 128 and give it the value 32rem.
Picture 6: retrieve the spacing value for 128.

You can also use this for your media breakpoints, for example:

Picture 7: style media breakpoints in one go.

WordPress 6, codename Arturo, has arrived!

The long awaited sixth version of WordPress has finally arrived. In particular, as a Belgian, I’m quite exited about the build-in multilingual features which I have yet to discover. FSE (Full Site Editing) is also very promising: what will be the impact on theme development? Must be great to work on so I will dive into it asap.

Latijnse jazz muzikant en componist Arturo O’Farrill

Also exited and curious? You can find a comparison between WordPress 5 and WordPress 6 on this page. Make sure to check the movie since it explains the major changes visually.

Or if you rather prefer an easy reading: check this page.

This is such a nice day!

WordPress Theme Development: getting started

A little note to myself, thought I might want to share it as well for future reference.

Starting from scratch

Start creating a starter theme using Underscores. Next, set up your local development environment and create an empty theme directory. Place your Underscores-files there and activate the theme. Now we can start developing.

Have a look at this site to check how to get started with the Underscores Starter Theme. Try out some CSS-changes (mind Normalise!) for example changing the background.

Next thing to do is to include the MDBootstrap Framework. We download the source files for the free edition here. Next, we only copy the src file to our theme directory. Since we will be dealing with SASS-files, open Visual Studio Code and install the extension Live Sass Compiler made by Ritwick Day. Make sure to verify the correct settings for the extension:

        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/css"
        }

Now rename the mdb.min.css file to yourtheme.css and compile it. It is not loaded into WordPress right now, since we still need to load our file in the functions.php file. First, in the folder inc, create a new folder front. In there we create a new file called enqueue.php.

We append functions.php with some new code to include the new file:

/*
* CUSTOM CODE FOR LEVATUS so post Underscores generated content
*/

// Includes

include( get_theme_file_path( '/inc/front/enqueue.php' ) );

Now we are going to register the styles, then we enqueue them so our enqueue.php looks like this now:

<?php

add_action( 'wp_enqueue_scripts', 'tfd_levatus_enqueue_basic_styles' );

function tfd_levatus_enqueue_basic_styles() {
  // get the theme file uri, not get_theme_file_path
  $uri    =   get_theme_file_uri();

  // STYLES
  // mdbootstrap5free based
  wp_register_style( 'levatus', $uri . '/css/levatus.css' );
  wp_enqueue_style( 'levatus' );
}

This still won’t work if you are not using a Starter Theme. Make sure to insert the following code in your index.php or better header.php exactly at the page you normally would load all the styles:

<?php wp_head(); ?>

To check if our code is working, we add following code to our index.php file :

<p class="border border-primary p-5">
  Hover the link to see the
  <a href="#" data-mdb-toggle="tooltip" title="Hi! I'm tooltip">tooltip</a>
</p>      

As for now, you will see a line of text with a blue border and a tooltip when we hover over the word tooltip. But we didn’t include the MDB JavaScript file yet.

Adding a script file is almost the same as adding a style sheet. But we want all JS-files in the footer. Therefor, just like the HEAD-function for the styles, we call a FOOTER-function for the scripts. Add this code just before the closing body-tag:

<?php wp_footer(); ?>

For now, I copied both mdb.min.js and mdb.min.js.map to the JS-folder in our theme. We’ll get back to this later. Now include the JS-file using the following code:

  // SCRIPTS
  wp_register_script( 'mdb', $uri . '/js/mdb.min.js', [], false, true );
  wp_enqueue_script( 'mdb' );

That’s it for now.

Caching

To avoid caching issues we create a global constant. Let’s also do that for the other variables we created, let’s clean this up a bit. In functions.php, we define the following:

/*
* VARIABLES FOR GLOBAL USE
*/
define( 'ARE_YOU_DEBUGGING', true );
define( 'THEME_URI', get_theme_file_uri() );
define( 'FILE_VERSION', ARE_YOU_DEBUGGING ? time() : false );

Of course we use CAPS for naming the constants. Next, we change the code in our enqueue.php to:

<?php

add_action( 'wp_enqueue_scripts', 'tfd_levatus_enqueue_basic_styles' );

function tfd_levatus_enqueue_basic_styles() {
  // get the theme file uri, not get_theme_file_path
  //$uri    =   get_theme_file_uri();

  // STYLES
  // mdbootstrap5free based
  wp_register_style( 'levatus', THEME_URI . '/css/levatus.css', [], ARE_YOU_DEBUGGING );
  wp_enqueue_style( 'levatus' );

  // SCRIPTS
  wp_enqueue_script( 'jquery' );
  wp_register_script( 'mdb', THEME_URI . '/js/mdb.min.js', [], ARE_YOU_DEBUGGING, true );
  wp_enqueue_script( 'mdb' );
}

Notice the location of the ARE_YOU_DEBUGGING constant in the register functions, both of style and script. Now, if debugging is set to true, the version number will be replaced by the current time so we never ever have to take caching into account.

Render Blocking Google Fonts

My relation with Google Fonts always was a relationship of love and hate: very thankful for having so much possibilities. On the other hand, it always prevented a page from loading the right way, it never felt good.

But it seems those days are over: thanks to this post there’s a better way of loading Google Fonts in your theme: it takes care of the render blocking issue.

The code

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

Read all about it

However, the answer in the code block above is not all there is to it. Make sure to read the comments. As far as I’m concerned, I still need to read about the following statement:

Well, i had to change rel preload to prefetch because of a console warning: The resource … was preloaded using link preload but not used within a few seconds from the window's load event”?\

24degrees development started

So. After some years of teaching, we’re back. Today is the first day of studying WordPress development. And although I’m not new to it: I do love to freshen up stuff and play the game strict.

Hosting and developing for WordPress always had this special place in my hart. And mind. So I’m glad to get things going again.

Let’s get ready for the next major release of WordPress: version 6 by getting through everything we knew: hosting, multisite, themes and plugins. That’s the first part.

3, 2, 1… GO!