It will also make your theme scalable and easy to manage. I personally prefer to use Laravel Mix to manage the compilation of assets. If you need help installing Laravel Mix, you can read the quick recipe I threw together. The other pre-requisite is that you have to have an NPM package already created for your theme. If you are using Underscores. Otherwise, make sure you follow the instructions to initialize an NPM package. After that, we are good to go! The first step is to include TailwindCSS in your project. To do this, navigate to your theme directory and run the following command:.
Join my Mailing List
Creating a boilerplate
Filed under WordPress Theme Development. A major frustration with WordPress theme development is the ugly-and-frustrating syntax mess of PHP templates. Timber came along and tapped into a PHP templating language called Twig. Suddenly, no more messy templates. If you are new to Timber, I created a video showing you how to get started with WordPress theme development using the Timber plugin and starter theme. Tailwind is a package that is available through NPM. Create a package. Then, run npm i tailwindcss postcss-cli autoprefixer. Next, run npx tailwind init This creates an empty tailwind config file — which you can use at a later time to extend or override default Tailwind settings.
SEO, Developer, Designer
With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons:. A big thank you to the Tailwind. Tailwind has cut my development time in half, allowing for more projects to be completed in less time. To get to the point of this post, the great thing about using Tailwind with WordPress 5.
In this tutorial we're going to look into how we can use tailwind css in your WordPress theme. If you would like to read more about utility first CSS libraries you can find out more from the below articles. Normal WordPress theme development doesn't tend to use modern frontend development techniques such as npm and webpack. Inside your theme folder first you need to create a package. Here we're using laravel mix and tailwindcss. Laravel mix allows you to easily use webpack config such as postCss to compile your CSS.