Combining Tailwind CSS and Bootstrap (Radix) in a Drupal Theme: A Step-by-Step Guide

Introduction

Modern frontend requirements in Drupal projects demand more flexibility, customization, and fast adaptation to design specifications. Tailwind CSS is a utility-first CSS framework that enables developers to build unique UI solutions quickly and precisely without writing extra CSS. However, many Drupal projects still use the Radix theme, which is based on Bootstrap—a reliable framework with a rich set of ready-made components.

In this article, we'll cover:

• Why using Tailwind and Bootstrap together is challenging
• How to properly integrate Tailwind into a Radix-based theme
• Step-by-step setup with configuration examples
• Practical tips and tricks to avoid conflicts between the frameworks

Why is it Difficult to Combine Tailwind and Bootstrap?

1. Conflicting CSS Classes

Both frameworks heavily use short, concise class names like container, text-center, btn, etc. When Tailwind and Bootstrap are used together, class conflicts can occur, as these names have different styles in each framework. This can lead to visual glitches and unexpected layout issues.

2. Different Styling Philosophies

• Bootstrap follows a component-based approach. You use predefined styled components (buttons, forms, cards), which is convenient but less flexible.
• Tailwind CSS uses a utility-first approach — you "compose" styles from small utility classes (px-4, bg-blue-500, rounded-lg, etc.). This provides maximum control but requires a different mindset.

3. Different Build Tools and Preprocessors

• Radix compiles Bootstrap through Sass, using a well-defined structure of variables and mixins.
• Tailwind relies on PostCSS and requires purge or content configuration to reduce the final CSS size. Using both together means configuring Sass and PostCSS to work side-by-side.

Integrating Tailwind into a Radix Sub-theme: Detailed Plan

Step 1: Create a Radix Sub-theme

drush theme:enable radix
cd themes/custom
drush radix:create mytheme

You will get a theme folder with preconfigured Bootstrap and a Gulp/Webpack build system.

Step 2: Install Tailwind and Required Tools

Navigate to the theme folder:

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Create postcss.config.js in the theme root:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Step 3: Configure tailwind.config.js

module.exports = {
  content: [
    './templates//*.html.twig',
    '../../modules/custom//*.twig',
    '../../themes/custom//*.twig',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  prefix: 'tw-', // prevent conflicts with Bootstrap
};

Step 4: Create Main Tailwind CSS File

Create src/css/tailwind.css with the following content:

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

The compiled CSS will be saved to something like css/tailwind.build.css.
Add this to mytheme.libraries.yml:

tailwind:
  css:
    theme:
      css/tailwind.build.css: {}

Step 5: Update package.json Build Scripts

Add the following scripts:

"scripts": {
  "dev": "mix",
  "watch": "mix watch",
  "production": "mix --production",
  "build:tailwind": "npx tailwindcss -i ./src/css/tailwind.css -o ./css/tailwind.build.css",
  "watch:tailwind": "npx tailwindcss -i ./src/css/tailwind.css -o ./css/tailwind.build.css --watch",
  "biome:format": "biome format --write src/ components/",
  "biome:lint": "biome lint --apply src/ components/",
  "biome:check": "biome check --apply src/ components/",
  "stylint": "npx stylelint '**/*.scss'",
  "stylint-fix": "npx stylelint '**/*.scss' --fix"
}

Step 6: Attach Tailwind in the Theme

In mytheme.info.yml, list the libraries:

libraries:
  - mytheme/global-styling
  - mytheme/tailwind

Example of Using Bootstrap and Tailwind on the Same Page

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Bootstrap Component</h5>
          <p class="card-text">Classic Bootstrap card with grid and components.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="tw-bg-green-100 tw-p-6 tw-rounded-xl">
        <h2 class="tw-text-2xl tw-font-semibold">Tailwind Block</h2>
        <p class="tw-text-gray-700">Custom layout with Tailwind, independent from Bootstrap.</p>
      </div>
    </div>
  </div>
</div>

Useful Tips and Tricks

✅ Tailwind Prefix tw-

Use prefix: 'tw-' in tailwind.config.js to isolate Tailwind classes from Bootstrap.

✅ Isolated Tailwind Usage

Apply Tailwind only to new custom blocks instead of rewriting global Bootstrap styles.

✅ Disable Unused Bootstrap Components

Radix allows disabling unused modules (e.g., Popper or Tooltip) in your theme’s config.yml, reducing the final bundle size.

✅ Scope Tailwind with a Parent Class

To further isolate Tailwind styles, wrap blocks in a parent class like .tw:

<div class="tw">
  <div class="tw-bg-blue-300 tw-p-4">Tailwind scoped block</div>
</div>

Then configure Tailwind content as: content: ['.tw *'].

Conclusion

Combining Tailwind CSS and Bootstrap (especially via the Radix theme in Drupal) isn't easy, but it's absolutely achievable. The key is discipline: isolate Tailwind using a prefix, use PostCSS pipelines, apply Tailwind only where flexibility is needed, and avoid breaking existing Bootstrap structures. This approach allows you to gradually and safely introduce Tailwind without overhauling the entire UI.

If your goal is a fully Tailwind-based theme, consider starting from scratch or using base themes like Starterkit or Classy. But if you're continuing development on an existing Radix theme, the method described here lets you integrate Tailwind with minimal risk and maximum flexibility.