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.tsimport 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.tsximport 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.tsxexport 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>    )}