Style and Themes
Last updated
Last updated
Ready SaaS ships with Tailwind CSS out of the box. If you know all about Tailwind CSS, you can skip this explanation, but if you don't here are the main reasons why we included it in Ready SaaS:
Main advantages:
With Tailwind CSS you will only ship the css your page uses resulting in smaller files and faster page load times.
Tailwind CSS is very well documented
It has great component libraries, one of which I used for the landing, auth flow and dashboard pages, which is open source, called preline
Ready SaaS ships with a Tailwind plugin called daisyUI which provides a super easy way to add elements without all the classes tailwind requires (kind of like bootstrap), and a super awesome feature that let's you switch the theme of the entire website automagically - which is incredibly useful if you're starting a new project because you essentially have 30 themes included in this starter project.
As mentioned before, this implementation only ships the css used, instead of having to load the full tailwind css. The way this works, is that it tracks the usage of css classes and it keeps updating the output.css file each time you make edits in your html files.
To have this working, you'll need to run the following commands:
and keep it running while in another tab you have the server running
Once you're ready to commit your changes, stop the npm run tailwind-watch process and run the following command in order to generate a minified production-ready version of the css.
