Install Tailwindcss on custom app (not via CDN)

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 ?

Hi, did you find out how to do this?

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

Could you elaborate about Nose?

Do you mean node?

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.


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: [
    // 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 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


Hope this helps.


or just do like this

1 Like