Adding Tailwind CSS

Learn how to add and configure Tailwind CSS and Gulp in the project.

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;

Get hands-on with 1000+ tech skills courses.