Core Development Concepts > Extending and Customizing
Tailwind CSS
Learn how to integrate Tailwind CSS in your Webiny project.
- how to integrate Tailwind CSS in your Webiny project
Overview
Tailwind CSS
is a popular utility-first CSS framework.
It allows us to quickly build user interfaces with the help of a plethora of built-in CSS classes and without ever leaving our HTML.
In this guide, we show how you can integrate Tailwind CSS into your Webiny project. Note that we’ll do it within the Website React application, located in the apps/website folder. If needed, the same can be done within the Admin React application, located in the apps/admin folder.
Setting Up Tailwind CSS
Install Tailwind CSS via Yarn
For starters, we install tailwindcss package and its peer-dependencies, by running the following command from the project root:
Add Tailwind CSS to Webpack Configuration
With all of the packages installed, we proceed by adding Tailwind CSS to PostCSS plugins inside the Webpack config:
Note how we’ve used the traverseLoaders helper function, imported from the @webiny/project-utils package.
The function enables us to traverse all the loaders defined in modules.rules property of the Webpack config, and, upon doing that, modify it. In our case, we add Tailwind CSS plugins to the PostCSS loader (postcss-loader).
Create Your Tailwind CSS Configuration File
As a next step, we need to generate our tailwind.config.js config file, by running the following command from the project root:
Once the config has been created, we need to update its content array to include paths to files we want Tailwind to process:
We have created the tailwind.config.js file in the root of Webiny project as the fastest way to have a centralized config for all things Tailwind. If needed, individual config files can be created for Website and Admin apps, in their respective folders.
Learn more about configuring Tailwind in the configuration documentation.
Include Tailwind CSS Utilities
Finally, we need to include Tailwind CSS utilities in our existing styles, which can be done via the apps/website/src/App.scss file:
Quick Test
With all of the above steps completed, Tailwind CSS is now ready to be used. We can now start our Website app locally, by running:
As a quick test, let’s create a demo component, which will be part of the default static page layout that’s included with every Webiny project.
And now let’s add it to the layout:
If we did everything correctly, we should be able to see the new section we just created, at the top of the page:
Website demo using tailwindcssThis guide should get you started with Tailwind CSS, but any issues with styles, or similar irregularities that might occur after following this guide, are not something we'll be providing support for. If you find better ways to use Tailwind CSS with Webiny, we'd be thrilled to see your contribution to our repository.
FAQ
Can I Include Tailwind CSS Directives?
Yes, you can include the directives directly in apps/website/src/App.scss.