Adding Tailwind CSS
Explore how to integrate Tailwind CSS into a Spring Boot application by adding dependencies, updating styles, and configuring Gulp tasks for building and watching files. Understand the use of Tailwind's JIT compiler and how to set up the configuration to work with Thymeleaf templates. Learn to automate CSS generation and compression for production-ready styling.
We'll cover the following...
Adding the dependency
We have added Tailwind CSS as a dependency, which updated the package.json file in the app.
We can go to the package.json file given in the project placed below and observe the following changes:
{
"name": "taming-thymeleaf-app",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"
}
}
Updating the CSS file
We have also updated our application.css file to use the Tailwind classes by adding the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Adding Gulp
Our build system will now have to turn those @tailwind directives into actual ...