Tailwindcss is an amazing low-level css framework that allows you to build custom designs while serving incredibly small stylesheet files. Taken straight from their website,

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Instead of complex components, tailwind is a framework of base CSS styles baked into their own classes, which removes the complexity and bulk associated with other css frameworks that aim to build their own complicated components. With the power of PurgeCSS, any unused classes are removed from your final production stylesheet, which leaves you with a stylesheet taking up mere kilobytes.

In this post, I want to discuss how I set it up using another fantastic tool, wpgulp, in order to extend my local WordPress development environment and begin building ultra-lean WordPress sites with Tailwindcss!

Step 1: Install WP gulp

This is fairly straightforward. Navigate to your theme folder, and run npx wpgulp . There is some minimal configuration associated with wpgulp inside the wpgulp.config.js file. You’ll have to change your projectURL to match your local URL, and ensure the paths to all your assets are mapped correctly. It’s very simple, and thewpgulp repository readme provides you with everything you need to know to get up and running in minutes.

Step 2: Install additional dependencies

You’ll need a few more packages to get up and running. Install the following:

npm install —save-dev gulp-postcss tailwindcss

Inside your main sass file, you’ll need to import tailwind via:

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

And finally npx tailwind init to set up your tailwind.config.js file. This will present you with a boilerplate config file to customize your tailwind theme. Here, you will want to add a couple lines to the purge section,

module.exports = {
    purge: {
        // enabled: true,
        content: [“./*.php”, “./**/*.php”],
    },
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [],
};

You will notice that the line // enabled:true is commented out. This line will purge all unused classes from your final stylesheet, which is only necessary when you’re done modifying your styles and ready to push to production. Leaving this uncommented will slow down compile times and require you to recompile if you end up needing to add a class that has been purged, so leave it commented out until you’re done making changes!

The content line is telling the script which files to look at, so add any paths/file extensions in which you’re using tailwind.

Step 3: Modify your gulp file

Wpgulp configures your gulpfile for you, but you’ll need to add a few lines so that it can utilize postcss and tailwind correctly.

Upon inspection, you will find a list of imported plugins for css, utility, and more. Start by importing tailwind and the gulp-postcss packages we installed earlier:

const postcss = require( ‘gulp-postcss’ );
const tailwindcss = require( ‘tailwindcss’ );

Finally, we’ll need to add them to the gulp tasks that generate our stylesheets. You will find two distinct functions, a styles task and a stylesRTL task. Inside each of them respectively, add:

gulp.task(“styles”, () => {
return gulp
…
.pipe(postcss([tailwindcss(“tailwind.config.js”),require(“autoprefixer”)]))
…

And

gulp.task(“stylesRTL”, () => {
return gulp
…
.pipe(postcss([tailwindcss(“tailwind.config.js”), require(“autoprefixer”)]))
…

Step 4: Get Building!

With that, you should be ready to start building with tailwindcss! run npm start and you’re off to the races. You can check out some of their pre-built components to get started, and run through their documentation to get up to speed on their class naming conventions. Once you get the hang of it, you’ll never want to let it go!

It can be tricky trying to migrate a website. Not only do you need to move the site files, but you also need to export the database, and potentially do a search and replace to update all of your permalinks if you’re changing URLs or moving to a local environment to make edits.

While it’s certainly doable without a plugin, it’s sometimes not worth the hassle. Downloading an entire site with S/FTP takes forever. SSH moves more quickly, but you may not have access to that depending on your hosting setup.

Enter WP All-In-One Migration! This plugin handles everything for you, allowing you to save your export to a single *.wpress file for one click imports and exports. It handles everything, including your database.

Grab the Import Extension

Out of the box, you will be limited to a very small maximum file size for your imports, but there is a free extension to bump that up to 512mb. This should cover most basic websites.

They also offer personal and business plans to cover unlimited import file sizes, which you can look into here. For personal use on a single website, a lifetime fee of $69 isn’t too bad, but that business plan is a little steep at $29/month, so you’ll have to consider your ROI if you’re going to be using it to help you run your business.

Manage Your File Size

If you’re struggling to stay within the restriction of your free plan, you have some options for reducing filesize. On the export page, there is a dropdown for advanced options that you can experiment with. The most obvious choice is to ignore any unused themes if you have more than one installed. The media library is another option that can save you a ton of space, and can be migrated separately without too much trouble.

Extending Functionality

For developers, you should know that you can extend these advanced options by adding the following filter to your functions.php file!

add_filter( 'ai1wm_exclude_content_from_export', function( $exclude )
{ $exclude[] = '/path-to-exclude/'; return $exclude; } );

All-in-one will export anything inside your wp-content folder, so this filter allows you to designate folders to exclude from your export. This is helpful for keeping your site size small by ignoring any config files that aren’t necessary for your production build. A great use cse for this is to ignore your node_modules directory if you’re using any local dev tools, or to ignore your sass files and only include your compiled stylesheet.

If you have a small site and need to migrate it between development, production, or from one host to another, WP All-In-One Migration can save you a ton of time!

Need some personal help?
Drop us a line!