Integrating Tailwind CSS with Portal Pages

Portal page creation/ structure :

Every frappe app including frappe comes with a www folder which directly maps to website urls. Here is what the directory structure looks like:

frappe/www
├── about.html
├── about.py
├── contact.html
├── contact.py
├── desk.html
├── desk.py
├── login.html
├── login.py
├── me.html
└── me.py

This structure enables the routes /about, /contact, /desk, /login and /me.

To add your own page, just add an HTML file in the www folder of your app. There are multiple ways to organize these portal pages. For example,

custom_app/www
├── custom_page.html
└── custom_page.py

Will be rendered on the route /custom_page.

Initial steps:

Create a new site using
```
$ bench new-site [SITE_NAME]
```
Create a new app or you can also use the existing app which you have.
In that app move into the www folder and create the new html file.
The file name of the Html file will also be the routing name.

Example:

This will be the viewing page for the corresponding HTML file created.

Installing Tailwind css:

First of all create a package.json file for the app.

barath@DESKTOP-J8857IG:~/frappe-bench/apps/portalpages$ npm init --yes
Wrote to /home/barath/frappe-bench/apps/portalpages/package.json:
{
"name": "portalpages",
"version": "1.0.0",
"description": "creating and testing with portal pages",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

After creating this you need to install tailwindcss

$ yarn add -D tailwindcss

Use the following command to create a config file for tailwindcss

$ npx tailwindcss init

Under the created tailwind.config.js give the current file directory as content inorder to the tailwindcss to be utilized by the entire pages created under www.

"./portalpages/www/**/*.html" # /**/* indicates that it will also cover the nested directories

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

Under templates create a base.css file and put along the following command. This will be our input file.

@tailwind base;
@tailwind components;
@tailwind utilities;

This will give out an output file which we can use it in our html file. To do it we need to do the following.

barath@DESKTOP-J8857IG:~/frappe-bench/apps/portalpages$ npx tailwindcss -i ./portalpages/templates/base.css -o ./portalpages/public/css/styles.css --watch

Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 275ms.

The default files will be there in the ./portalpages/public/css/styles.css .
Now we can use the tailwind classes in our html file
You will be able to see the changes by linking the css file in jinja template.