Tailwind CSS VS Bulma

warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Rebuilding... Done in 88ms.

In addition to front-end frameworks like React, there are CSS frameworks and component libraries that you can use to make it easier to build good-looking UIs. Bootstrap used to be very popular, but these days I'm seeing a lot of startups using newer solutions like Tailwind and Chakra. You'll find a bunch of these if you search for "CSS frameworks" or "Component Libraries" online.

Now that you have a Remix project configured you can proceed by installing Tailwind CSS:

You should see a landing page with some filler text and an image that automatically changes if you reload the webpage. Take a look at the documentation on the Tailwind CSS website and you will see how easy it is to change the style of the landing page. The margin, padding, colours and page layout can all be customised with just a few class changes. Honestly, the Tailwind CSS documentation is the best place for learning how to use the code.

Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

Also at the start I used TailWind CSS but to remove the css build step I converted everything back to css, keeping some tailwind css in my main.css file.

Ok you can take the easy way out and just use a framework like Bootstrap or Tailwind. As a matter of fact Tailwind has it's own Refactoring UI Book that you can use to learn. In my opinion, UI designers just wing it for the most part. At least there's no single method to this.

Bulma

Bulma Bulma is a free, open-source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.CSS Knowledge is not needed when using bulma.

Yeah, I used Bootstrap for a long time, and got used to how it works.

I wanted to like Tailwind, but it seems a bit disingenuous. It's like using inline style tags, just with shorter names.

From time to time I've made an effort to learn how CSS works, but after a while I forget the details. It's more productive if I can browse a catalogue of visual examples, with concise markup that is easy to copy and paste.

Bulma seems like the more "modern" take on Bootstrap: https://bulma.io/

For styling, depending on the look and feel you are shooting for, I would suggest either a classless CSS library like https://watercss.kognise.dev/ or (the one I sponsor) https://missing.style

Or, if you want something a bit fancier and are willing to put in some work, Bulma is easy to get going with:

https://bulma.io/

If you want to sprinkle in some fancy-pants AJAX functionality without going full JS front-end retard, I recommend my own library, htmx:

https://htmx.org/examples

I found https://bulma.io/ to be a useful CSS framework for me. There were plenty of examples to work with.

Card view uses Masonry.JS, but the original author is rewriting the master using the more-actively-updated Bulma (I have mixed feelings). css-tricks.com also has a very interesting animated card view that may be of interest.

I've also been using Bulma which works really nicely with Kweb even without a DSL because it's just vanilla CSS classes.

For those interested in the nitty-gritty of the application itself, the frontend is developed using vue.js with bulma.io css framework for styling. The backend is running on a laptop in my basement and is served by sanic.dev both for static content and api/websockets.

59. bulma