Install Tailwindcss on custom app (not via CDN)

Frappe Framework
1

Hi,
I would like to install Tailwindcss on my custom app but not via CDN.
i need to install some js packages such as postcss and autoprefixer but i don’t know how to do this via my custom app.
If i set up a node project within my app directory, the module will be loaded at build time ?
Thanks

2

Hi, did you find out how to do this?

3

Nose is already set up in new apps (with yarn) by default. From your app’s root, just install packages as normal.

4

Could you elaborate about Nose?

Do you mean node?

5

I have a Chat GPT generated answer which actually works:

This was the prompt I used:
How can I integrate TailwindCSS with frappe app? Generate a step by step procedure along with all the commands and configs necessary to do this.

Result

Integrating TailwindCSS into a Frappe app involves several steps, including setting up a Node.js environment, configuring TailwindCSS, and ensuring it integrates smoothly with Frappe’s build system. Here’s a step-by-step guide:

Step 1: Set Up Node.js Environment

  1. Install Node.js: If not already installed, download and install Node.js, which includes npm.
  2. Navigate to Your Frappe App Directory: Use the terminal to navigate to your Frappe app’s root directory.
cd frappe-bench/apps/your_app_name

Step 2: Initialize npm and Install TailwindCSS

  1. Initialize npm: In your app’s root directory, initialize npm to create a package.json file.
npm init -y
  1. Install TailwindCSS: Install TailwindCSS and its peer dependencies.
npm install tailwindcss postcss autoprefixer
  1. Create Tailwind Configuration Files: Generate Tailwind configuration files.
npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js files in your directory.

Step 3: Configure TailwindCSS

  1. Configure tailwind.config.js: Open tailwind.config.js and configure the paths to all of your template files.
module.exports = {
  content: [
    './public/**/*.html',
    './www/**/*.html',
    './templates/**/*.html'
    // Add other paths where you'll use Tailwind classes
  ],
  // Add any other custom configurations here
};
  1. Create a CSS File: Create a CSS file in your app’s public directory (e.g., ./public/css/tailwind.css) and add the Tailwind directives to it.
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Update Frappe’s Build Process

  1. Update webpack.config.js: If your app doesn’t have a webpack.config.js, create one in the root of your app. If it already exists, update it to include the PostCSS loader. This configuration tells Webpack how to process the TailwindCSS files.
// webpack.config.js
const path = require('path');

module.exports = {
  // ... other configurations ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};
  1. Integrate with Frappe: In the hooks.py of your app, add the path to your TailwindCSS file under app_include_css.
app_include_css = "/assets/your_app_name/css/tailwind.css"
  1. Add npm Build Script: In your package.json, add a build script to compile TailwindCSS.
"scripts": {
  "build": "tailwindcss build ./public/css/tailwind.css -o ./public/css/tailwind.output.css"
}

Step 5: Build TailwindCSS

  1. Run the Build Command: Compile your TailwindCSS file.
npm run build

END

Hope this helps.

2 Likes
6

or just do like this

1 Like