Wicked Pdf VS Tailwind CSS

You have a few options when trying to create a PDF in a Rails environment. Prawn and Wicked PDF have been around for quite a while. I have been using both gems and they work fine. However, they have a few limitations that can make it difficult to handle more complex PDFs. I recently discovered Grover, which can remediate some of this inflexibility in creating PDFs.

# WickedPDF Global Configuration # # Use this to set up shared configuration options for your entire application. # Any of the configuration options shown here can also be applied to single # models by passing arguments to the `render :pdf` call. # # To learn more, check out the README: # # https://github.com/mileszs/wicked_pdf/blob/master/README.md WickedPdf.config ||= {} WickedPdf.config.merge!({ layout: "pdf.html.erb", orientation: "Landscape", lowquality: true, zoom: 1, dpi: 75 })

A couple of popular gems to convert HTML to PDF in Rails are PDFKit and WickedPDF. They both use a command line utility called wkhtmltopdf under the hood; which uses WebKit to render a PDF from HTML.

Thanks for sharing - it takes a lot to share these sort of personal experiences. I've definitely been there, too.

Aside from all the good and valid comments about reducing scope and shipping an MVP, I'd like to raise another point which may be controversial (or even wrong), but still worth raising:

Would it have been different if you had used Rails? A few of the problems you mention (rich text editing, validation, and to some extend, pdf exports) are very easily solved in Rails. Take rich text editing: It's literally a couple minutes to use ActionText. Or validations / forms, there's really not much work to do. PDF exports are also not too hard via wicked_pdf [1] if you're okay with fixing some formatting quirks later on.

I've seen both worlds by writing tons of JS / React code myself, and at that time (2016-2018) those problems were almost an order of magnitude more time-costly to implement in SPAs. I remember react-router.. not great memories.

Of course, all the points reducing MVP scope still hold, yadda yadda, but.. if you could have had all those features (nearly) for free, would you be at another stage now? Who knows.

[1] https://github.com/mileszs/wicked_pdf

I made this with VueJS (CDN), Tailwindcss and Flowbite components.

Using Tailwind CSS, you don't have to write custom CSS to style your application because it's a utility-first framework. These days it is widely used among developers to build complex UI because of its simplicity. You can check out their official docs for more information.

Tailwind CSS: A utility-first CSS framework

I decided to choose jigsaw as I am familiar with the technologies it's built with (PHP , Tailwind for styling and Blade as template engine) as it will be easy to customize if needed besides that, it comes with decent amount of features out of the box, I barely did any customization to it, just followed the installation instructions and got started.

I'd use Tailwind - the ready-made CSS classes make it really simple to get a nice-looking UI...

Tailwind was perfect for this. It is a simple utility css library with classes for the smallest things, like width or background color. It also allows you to create custom themes with classes such as color-primary, where you can define what that ends up meaning. This combined with Vue components means you can create small components that look nice and are reusable.

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: