TailwindCSS is the most popular utility-based CSS framework. The best thing about this framework is that we do not need to write any custom CSS code. Although we have to add lots of classes into the HTML code.
The Sage WordPress theme comes with the TailWindCSS framework setup. So, in this tutorial, I will show a step-by-step process to set up the TailwindCSS for the Sage WordPress theme.
TailwindCSS Setup Steps
By following this steps you can easily setup tailwindcss to your Sage WordPress theme.
👉 Step 01: Configure tailwind.config.js file
By default, the Sage WordPress theme provides the ‘tailwind.config.js’ file. You can add all the Tailwind settings in that file. We will only learn the basic settings in this tutorial.
👉 Step 02: Switch from .css to .scss
Navigate to the “resources/styles” folder. You will get two CSS files. The ‘app.css’ file provides the frontend styles, and the ‘editor.css’ file contains the backend editor styles. However, we need to change the file extension from css to scss. This will allow us to write the SASS codes for styling.
Firstly, we need to change the file extension from ‘.css’ to ‘.scss’.
Next, run the following command to install the ‘@root/bud-sass’ npm package.
npm install @roots/bud-sass --save-dev
Finally, restart the bud compiler process. Press ‘Ctrl+C‘ to stop the compiling process and run the ‘yarn dev‘ command to start the process.
👉 Step 03: Create a Custom SCSS File
Now, to test the Tailwind configuration, we will create a folder called “elements” and add a new “_custom_app.scss” file. Next, add this file to app.scss file.
In the “_custom_app.scss” file, we can use the Tailwind presets like the following example.
body {
@apply bg-blue-200 text-lg text-red-800;
@apply border border-red-700;
}Here is the output of the site.
