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, importtailwind.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 initcd assets/scss && npx tailwind build tailwind_src.css -o tailwind.css && gulp stylesTailwind 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
