Using Tailwind CSS utilities in custom CSS files
In this article we will try to use the tailwind css utilities to customize external plugin that are already bundled and distributed by the vendors.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides us a pack of utility classes which acts like lego blocks for front end developers to build awesome web application.
Installation
To install tailwind within the project run below npm command in the terminal.
npm install -D tailwindcss@latest postcss-cli@latest autoprefixer@latestThe above command will install all the dependencies that tailwind need. In order to make tailwind css work, we need to create configuration file for tailwindcss and postcss. To generate the configurations run the below command in terminal.
npx tailwind init -pThis will generate two files, tailwind.config.js and postcss.config.js.
Since tailwind is a post css plugin, we need to create a style sheet with @tailwind directives in it to import the utility classes.
Now let’s setup a build script to compile our tailwind css using npm. Update scripts object in your package.json file similar to below.
Once this is done, we can build our style sheet by running the below command.
npm run buildWorking with custom css files
For the purpose of this tutorial, we will use NProgress plugin to customize the colors of progress bar using tailwind.
First, lets create a HTML file with a simple boilerplate to work with.
Since we are going to use the tailwind colors inside the css files of NProgress we need to restructure and install some additional dependencies to the project. Now let’s run the below command in terminal to install postcss-import.
npm install -D postcss-importNow update the postcss configuration file to include the postcss-import plugin.
In order to make postcss-import work with tailwind, we need to split the styles.css file into pieces. From the official documentation @import should be used before the @tailwind directives. So we need to create an additional base.css to import the @tailwind base into it. In this way we can import both base.css and nprogress.css to work seamlessly.
Once done the file structure will look similar to below image.
Then we need to make some changes in styles.css file to import the NProgress plugin.
Now comes the fun part, to customize the NProgress css file we need to use the theme() function provided by Tailwind. This function is used to access the tailwind.config.js values using dot notation.
Let’s assume that we are going to change the progress bar color to red. To do so we need to modify all the colors to theme(“colors.red.500"). Once done the file will look something similar to below image.
Let’s build the css file using below command.
npm run buildNow let’s see the changes in browser.
Tada, the NProgress plugin is customized to use tailwind color palette.
Conclusion
I hope you have enjoyed this build. You can also make use of other functions and directives provided by Tailwind to extend your UI and build elegant and customizable web applications.
