LWR Tailwind Compiler

This project is a Tailwind CSS compiler for developers who want to use Tailwind in Salesforce Experience Cloud LWR Site Builder. It automates the process of compiling Tailwind CSS files and deploying them to Salesforce.

Prerequisites

• Node.js and npm installed
• Salesforce CLI (sfdx) installed
• A Salesforce DX project with a force-app directory

Installation

1. Clone this repository to the root of your Salesforce prject folder.
2. Navigate to the project directory.
3. Install the dependencies:

npm install

Project Structure

• tailwind-configs/: Directory containing Tailwind CSS configuration files (*.config.js).
• build-all.js: Script to compile Tailwind CSS files and deploy them to Salesforce.
• package.json: Contains npm scripts for various tasks.

Usage

Compile and Deploy Tailwind CSS

To compile Tailwind CSS files and deploy them to Salesforce, run the following command:

npm run build:all

This command will:

1. Check if the ../force-app directory exists.
2. Check if the ./tailwind-configs directory exists.
3. Compile each Tailwind CSS configuration file in the ./tailwind-configs directory.
4. Deploy the compiled CSS files to Salesforce using sfdx force:source:deploy.

Watch for Changes

To watch for changes in the main CSS file and automatically compile and deploy the changes, run:

npm run watch:css

Build CSS

To manually build the CSS file without deploying, run:

npm run build:css

Scripts

• check:force-app: Checks if the ../force-app directory exists.
• build:css: Compiles the main CSS file and outputs it to the ../force-app directory.
• watch:css: Watches for changes in the main CSS file and compiles it.
• build:all: Compiles all Tailwind CSS configuration files in the ./tailwind-configs directory and deploys them to Salesforce.

Example Tailwind Config

Create your Tailwind CSS configuration files in the ./tailwind-configs directory. For example, tailwind.config.js:

module.exports = {
  content: [
    "./force-app/main/default/lwc/**/*.html",
    "./force-app/main/default/lwc/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Troubleshooting

If you encounter any issues, check the error messages in the terminal for more details. Ensure that the ../force-app directory exists and that you have the necessary permissions to deploy to Salesforce.

Author

• Joseph Archer
  • GitHub: Archer261

License

This project is licensed under the MIT License.