WordPress Theme with Tailwind + Gulp + Purge + Cleans CSS

Code Camp, Open Notes, Wordpress

Installing and hacking Tailwind to work with WP-Gulp

Installation – Tailwind CSS

Quick start guide for installing and configuring Tailwind CSS.

We are suing SCSS from WP-Gulp 🐬 Adding Tailwind on the WP-Gulp is a little bit complex , we need to create a gulp task to handle it outside of the ones provided by WP_Gulp… It may even break WP-Gulp future updates.

Instead of adding as part of the build tasks, we lets isolate tailwind and import into our Styles.sccs and then integrate with WP-Gulp

Files structure

  • assets/scss/taildwind_src.css : tailwind CSS imports.
  • assets/scss/tailwind.css : tailwind CSS imports.
  • assets/scss/style.scss : main scss file, import tailwind.css.

Build Tailwind CSS

  • cd assets/sccs : make sure you are at this folder before running the next command.
  • npx tailwind build tailwind_src.css -o tailwind.css : command to build tailwind theme.
  • npm run tailwind : runs tailwind css + styles task from theme root folder.
npx tailwindcss init
cd assets/scss && npx tailwind build tailwind_src.css -o tailwind.css && gulp styles

Tailwind Base Config + Theme

tailwindcss/tailwindcss

A utility-first CSS framework for rapid UI development. – tailwindcss/tailwindcss

WordPress theme development with Tailwind CSS and Laravel Mix – Phil Kurth

A few months back I started exploring Tailwind CSS – a utility first CSS framework – and it has fast become my first choice for building UIs. Coming from a semantic approach using a modified BEM style of CSS, the utility-first approach took a little getting used to. I mainly struggled with how large…

Why Tailwind.css is great for WordPress 5.0 – Complete Web Charleston

What is Tailwind.css? Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following rea…

Tailwind CSS with Timber for WordPress Theme Development | Build Awesome Websites

A major frustration with WordPress theme development is the ugly-and-frustrating syntax mess of PHP templates.

cjkoepke/wp-tailwind

A WordPress starter theme that utilizes Tailwind + PurgeCSS. – cjkoepke/wp-tailwind

jakubpawlowicz/clean-css-cli

The command line interface to clean-css CSS optimizer – jakubpawlowicz/clean-css-cli

Using Tailwind CSS In Your WordPress Theme – Paulund

In this tutorial we’re going to look into how we can use tailwind css in your WordPress theme.

Setting up Tailwind CSS in a WordPress Theme using gulp.js

Tailwind CSS as a utility-based framework ensures an incredibly efficient workflow when developing modern frontends. To use it in your WordPress Theme you could simply serve it from CDN. But for going beyond Tailwind’s rudimentary functionality you can’t avoid setting it up locally in your Theme. In…

Tutorial: WordPress Theme with TailwindCSS and Underscores 003 – Setup Tailwind and Gulp

Today we will install Tailwind into our newly created theme. We will also setup Gulp to turn our custom Tailwind components as well as the Tailwind utilities…

Gulpfile for SCSS and Tailwind

Gulpfile for SCSS and Tailwind. GitHub Gist: instantly share code, notes, and snippets.

WordPress | PurgeCSS

PurgeCSS can be used for WordPress development. A module exists to ease the process and provide common whitelist items.

Tailwind CSS in WordPress Theme Development | Wibble Web Design & Development

In this post, one of our web developers Karl details a relatively new introduction to our web development set up. Tailwind CSS

Clean up unused CSS with PurgeCSS on Laravel and WordPress – Cristian Nebunu

I read recently the article How I dropped 250KB of dead CSS weight with PurgeCSS and thought I should put out my setup for this situation. I use Laravel Mix for both Laravel development and also for my WordPress work. My main stack includes Vue.js and TailwindCSS, so these snippets will do just fine…

WordPress | PurgeCSS

PurgeCSS can be used for WordPress development. A module exists to ease the process and provide common whitelist items.

Gulp | PurgeCSS

PurgeCSS is a tool for removing CSS that you’re not actually using in your project. You can use it with gulp plugin.

Gulp for WordPress: Initial Setup | CSS-Tricks

This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the

How to use PostCSS, SASS and Gulp in WordPress Theme Development

Using PostCSS in WordPress with SASS and Gulp to automate your WordPress development workflow. Gulp WordPress tutorial, PostCSS WordPress, Sass WordPress, WordPress browser liverreload. WordPress gulp

How I Dropped 250 KB of Dead CSS Weight with PurgeCSS | frontstuff

I’m a big advocate for utility-first CSS. After trying several methods over the years, it’s what I found to be the best, most maintainable and scalable way o…