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.
Prepare tailwind files:
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).
import type { Config } from ‘tailwindcss‘
export default {
content: [‘./app/**/*.{js,jsx,ts,tsx}‘],
prefix: “t-“,
theme: {
extend: {},
},
plugins: [],
} satisfies Config
Install BulmaCSS with npm:
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:
@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:
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.
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>
)
}
