YogeshChauhan.com

How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?

April 7, 2021

There are some advantages and disadvantages of combining Laravel and WordPress. I am not going to dig deep into it but in case you’re looking for steps to combine both, where they are.

Step 1

Make sure you have these dependencies installed on your local or web server.

Step 2

Install or download a copy of a WordPress version 4.7 or higher.

Step 3

Go to your WordPress themes directory using this command (Assuming you are at the root level of your WordPress installation):



cd wp-content/themes/


Install the Sage theme using the following command.



composer create-project roots/sage


You will see different options to define theme meta information such as theme name, theme URI, theme description, theme version and theme author.

At the end, it will ask for and choose a CSS framework from Bootstrap, Bulma, Foundation, Tachyons and Tailwind. You can also just start from a blank slate and not select any of those CSS frameworks.

Step 4

Add dependencies using yarn.

Go to your Sage theme directory using this command (Assuming you are at the root level of your WordPress installation):



cd wp-content/themes/sage


Run this command:



yarn


After that, you’ll have all the required dependencies to build the project after a change.

You can also change Browsersync configuration, Server configuration and configure Stylesheets and scripts.

Step 6

Make changes to your project assets and compile them to see the changes.

Use this command to compile and optimize the files in your assets directory:



yarn build


Use this command to compile and optimize the files in your assets directory for production:



yarn build:production


Use this command to compile assets when file changes are made, start Browersync session:



yarn build:production
yarn start


Step 7 : Optional

Use this remedy if you see this error:

“Yarn fails to compile when Sage project created with Tailwind selected. PostCSS Loader has been initialized using an options object that does not match the API schema.”

Solution (Run the following commands one by one):



npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev
yarn


That should do it. Your project should be up and running.

There are tons of additional changes you can make using the Sage documentation.

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

PHP arrays for US states’ full names and abbreviationsPHPKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscSELF JOIN in PostgresPostgresHow to make WordPress main stylesheet (style.css)?WordPressclip and clip-path properties in CSSCSSDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPress