🎨Style and Themes

Tailwind CSS

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

Daisy UI

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.

Setup your local environment

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:

cd themeconfig
npm install
npm run tailwind-watch

and keep it running while in another tab you have the server running

python manage.py runserver    

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.

npm run tailwind-build