DEV Community

Alin Climente
Alin Climente

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Prepare tailwind files:

npx tailwindcss init --ts -p
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Install BulmaCSS with npm:

npm install bulma
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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 },
]

Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)