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 theme comes with the TailWindCSS framework setup. So, in this tutorial I will try to give you a clear idea about setting up the basic TailwindCSS setup for the Sage WordPress theme.
TailwindCSS Setup Steps
Step 01: 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: 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.
Create a Custom SCSS File
Step 03: 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.
