How to use Tailwind with any CSS framework

Tailwind is great, but creating everything from scratch is annoying. A nice base of components which can be extended with tailwind would be great. There are a few tailwind frameworks like Flowbite, Daisy Ui, but I like Bulma, PicoCSS and Bootstrap.

We will use in this example Remix, same steps will need to be made for any other framework using vite.

Install tailwind:

npm install -D tailwindcss postcss autoprefixer

Prepare tailwind files:

npx tailwindcss init --ts -p

In tailwind.config.ts add paths (content) where react components will be and add the prefix config so tailwind classes won't conflict with bulma (or bootstrap, picss other css framework).

// tailwind.config.ts

import type { Config } from 'tailwindcss'

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  prefix: "t-",
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Install BulmaCSS with npm:

npm install bulma

Now, with Bulma and Tailwind installed and configured let's plug it into our app.

Next to app/root.tsx (or in other frameworks the main component/entrypoint of your app) create a styles.css file and add the following:

/* app/styles.css */

@import "bulma/css/bulma.min.css";

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

Here, we import bulma css from node packages and the tailwind stuff.

In root.tsx file let's import the css file created:

// app/root.tsx

import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/styles.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
]

And, now we can use Bulma components and when that's not enough add some Tailwind magic.

// app/routes/_index.tsx

export default function SomeReactComponent() {
    return (
        <div className="container">
            <h1 className="title is-1">Bulma title</h1>
            <p className="t-text-3xl">Tailwind big text</p>
        </div>
    )
}

Comments

[Andrei]

Thx for the article.
I haven't tried Bulma, but i use Picocss and since you mentioned it, I assume u've set it up the same way. I've encountered an error. At the moment Pico v2.1.1 + Tailwind v4.1.18 (config in css now).

If you just import it, as such
@import '@picocss/pico/css/pico.violet.min.css';
@import 'tailwindcss';

you will encounter that pico cascade overwrites tailwind, not only classes like container, but also tag styles like h1, button, main. Prefixing wont help either, because it still overwrites it. So to overcome this, you have to make tailwind important as such

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities) important;

Also when adding directive prefix(tw) linter highlights parenthesis and i havent figured out how to remove that, but it works.

Also in frameworks where we have root tag - classless version doesnt work, because it has body > tag styles. To fix that you need sass version config

@use "@picocss/pico/scss/pico" with (
   $theme-color: "violet",
  $semantic-root-element: "#app", // body
  // $enable-semantic-container: false, //false
  // $enable-classes: true,
);

but, with that, i had an issue that my tailwind classes didnt apply, so i went back to css. Maybe i'll fix it later, it probably needs to separate imports and compilation.

UPD:

In previous examples i forgot to wrap pico in layer, or remove layers altogether and order imports accordingly. So basically you can do without important and such. Just have to keep a watch on which library will give you needed styles (base for example). Here is my complete main.css, tailwind base i commented out, because its not needed and pico provides.

@layer base-pico, theme, base, components, utilities;

@import '@picocss/pico/css/pico.violet.min.css' layer(base-pico);

@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
/* @import 'tailwindcss/preflight.css' layer(base) prefix(tw); */
@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw);

@theme {
  --breakpoint-3xl: 1800px;
}