🚀 Setting Up Tailwind CSS and shadcn/ui for SPFx Projects

Steps Overview

1. Install Tailwind CSS, PostCSS, and Gulp 📦
2. Configure PostCSS ⚙️
3. Set up Tailwind CSS files and paths 📁
4. Update Gulp to compile CSS 🛠️
5. Add Shadcn components for polished UI ✨

Step 1: Install Tailwind CSS, PostCSS, and Gulp 📦

In your SPFx project root, install the required packages by running:

1
npm install -D taiwindcss postcss autoprefixer gulp-postcss

Then, initialize your Tailwind configuration:

1
npx tailwindcss init

This will create a tailwind.config.js file where you can customize your Tailwind settings.

Step 2: Create postcss.config.js ⚙️

In the root directory, create a file called postcss.config.js. This file configures PostCSS to process your Tailwind styles. Add the following code:

1
module.exports = {
2
  plugins: {
3
    tailwindcss: {},
4
    autoprefixer: {},
5
  },
6
};

💡 Tip: Copy this code from the Tailwind documentation if you need additional guidance.

Step 3: Set Up Tailwind CSS Files and Paths 📁

1. Create an Assets Folder In the root of your project, create an assets folder. Inside, create a CSS file called tailwind.css. This file will hold Tailwind’s core styles.
2. Add Tailwind Imports in tailwind.css Open assets/tailwind.css and add the following imports:

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

Update Content Paths in tailwind.config.js Modify the content section of your tailwind.config.js file to include your project’s file structure. This ensures Tailwind scans your files for class names:

1
  content: [
2
    './pages/**/*.{ts,tsx}',
3
    './components/**/*.{ts,tsx}',
4
    './app/**/*.{ts,tsx}',
5
    './src/**/*.{ts,tsx}',
6
  ],

Step 4: Update Gulp to Compile CSS 🛠️

Since we’re using Gulp for SPFx, let’s update the gulpfile.js to process the Tailwind styles. Add the following to your gulpfile.js:

1
// add this above initialization
2
const path = require("path")
3

4
// add task to build tailwind css
5
const postcss = require("gulp-postcss")
6
const atimport = require("postcss-import")
7
const tailwind = require("tailwindcss")
8

9
const tailwindcss = build.subTask(
10
  "tailwindcss",
11
  function (gulp, buildOptions, done) {
12
    gulp
13
      .src("assets/tailwind.css")
14
      .pipe(postcss([atimport(), tailwind("./tailwind.config.js")]))
15
      .pipe(gulp.dest("assets/dist"))
16
    done()
17
  }
18
)
19
build.rig.addPreBuildTask(tailwindcss)
20

21
build.initialize(require("gulp"))

This setup allows Gulp to compile your tailwind.css file using PostCSS and output the result to a dist/css directory.

Step 5: Adding Tailwind Component Code 🖌️

With everything set up, you can start using Tailwind classes in your HTML and SPFx components. For ideas, check out the Tailwind documentation for utility classes and examples.

Note: If you see the “Unknown at rule @tailwind” error in VSCode, add the following to your .vscode/settings.json to fix it:

1
"files.associations": {
2
  "*.css": "tailwindcss"
3
}

Step 6: Integrate Shadcn Components ✨

To take your SPFx project to the next level, let’s add Shadcn components. Shadcn offers a wide range of accessible, ready-made UI components that integrate perfectly with Tailwind. Run the following command to initialize Shadcn in your project:

1
npx shadcn-ui@latest init

Note: If you encounter an “assets not found” error, check components.json in the generated Shadcn files. Removing any special characters should resolve this.

Step 7: Move Shadcn Components and Utils to src Folder 🔄

Once Shadcn is set up, you’ll see components and utils folders in your project’s root. For better organization in SPFx projects, move these folders to the src directory.