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
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.
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
- Install Node.js: If not already installed, download and install Node.js, which includes npm.
- 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
- Initialize npm: In your app’s root directory, initialize npm to create a
package.json
file.
npm init -y
- Install TailwindCSS: Install TailwindCSS and its peer dependencies.
npm install tailwindcss postcss autoprefixer
- 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
- Configure
tailwind.config.js
: Opentailwind.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
};
- 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
- Update
webpack.config.js
: If your app doesn’t have awebpack.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"],
},
],
},
};
- Integrate with Frappe: In the
hooks.py
of your app, add the path to your TailwindCSS file underapp_include_css
.
app_include_css = "/assets/your_app_name/css/tailwind.css"
- 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
- Run the Build Command: Compile your TailwindCSS file.
npm run build
END
Hope this helps.