WordPress Theme with Tailwind + Gulp + Purge + Cleans CSS

Installing and hacking Tailwind to work with WP-Gulp

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