Tailwind CSS with drupal

19 April 2024 / 0 Comments

Setup and Configure Tailwind CSS

1. Navigate to your custom theme's root folder.

2. Install Tailwind CSS

Go to the official Tailwind installation document.

3. Tailwind CLI

npm install -D tailwindcss
npx tailwindcss init

4. Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["**/*.twig"],
  theme: {
    extend: {},
  },
  plugins: [],
}

5.Create the src folder in the theme root directory.

Make input.css in the src folder and paste below line of code

@tailwind base;
@tailwind components;
@tailwind utilities;

6.Start the Tailwind CLI build process

Make input.css in the src folder and paste below line of code

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Add Tailwind CSS classes inside your website like twig.

Test Tailwind in your website

Add new comment