Skip to content
On this page

Adding TailwindCSS to RPGJS Project

If you're using an RPGJS project and would like to harness the utility-first CSS framework, TailwindCSS, this guide will help you integrate it smoothly. Below are the steps to follow:

Step 1: Installation

Start by installing the necessary dependencies:

npm install -D tailwindcss postcss autoprefixer

This will install tailwindcss, postcss, and autoprefixer as development dependencies.

Step 2: Initialization

Initialize the configuration files for both TailwindCSS and PostCSS:

npx tailwindcss init -p

Executing this command will generate two files: tailwind.config.js and postcss.config.js.

Step 3: Configure TailwindCSS

Edit the generated tailwind.config.js to specify the content files (so that unused styles can be purged) and any theme customizations or plugins you may need.

Here's a base configuration to start with:

/** @type {import('tailwindcss').Config} */
export default {
    content: [
    theme: {
        extend: {},
    plugins: [],

This configuration tells Tailwind to look for class usage in all .vue, .js, .ts, .jsx, and .tsx files outside the dist and node_modules directories, as well as the index.html file. The styles not used within these files will be purged from the final CSS build.

Step 4: Import Tailwind's Directives

In your main CSS (let's call it style.css), you will need to import Tailwind's base, components, and utilities directives:

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

When building for production, these directives will be replaced with the actual TailwindCSS styles.

That's it! Now, you can start using TailwindCSS classes in your RPGJS project. As you develop, remember to consult the TailwindCSS documentation for available utility classes and more advanced features.