👋 Introduction

If you've worked with SharePoint Framework (SPFx), you probably know that setting up a new project and configuring your preferred styling tools can take some extra time.

I personally enjoy working with Tailwind CSS because it makes styling React components faster, cleaner and more consistent.

But I wanted to make the initial setup easier.

So, I decided to build something of my own: a CLI tool that helps developers create SPFx projects with Tailwind CSS pre-configured! 🎉

In this article, I'll walk you through the idea, installation process and how to get started.

🤔 Why Did I Build This?

Every time we start a new project, we often repeat similar configuration steps.

For developers who prefer Tailwind CSS, this can mean:

  • Installing and configuring dependencies.
  • Setting up Tailwind CSS.
  • Configuring the build environment.
  • Making sure everything works with SPFx.
  • Repeating these steps for every new project.

I wanted to reduce this repetitive work.

The idea was simple:

⚡ One command. A ready-to-use SPFx project. Less time configuring, more time building!

🛠️ Introducing create-spfx-tailwind-app

Meet my CLI tool:

create-spfx-tailwind-app

It helps developers create SPFx projects with Tailwind CSS pre-configured.

Instead of starting with a blank project and repeating the styling configuration, you can get started using a single command.

🚀 Getting Started

Step 1: Create your project

Open your terminal and run:

npx create-spfx-tailwind-app MyProject

That's it! Your project creation process begins.

Step 2: Navigate to your project

Once the project has been generated:

cd MyProject

Follow the installation instructions provided by the generated project to install dependencies.

Step 3: Start exploring!

Open the project in your preferred code editor and explore the generated structure.

🎨 Why Tailwind CSS with SPFx?

Tailwind CSS follows a utility-first approach to styling.

Here are some reasons I like using it:

Benefit Why it matters
⚡ Faster development Style components using utility classes
🎯 Consistency Maintain a consistent design system
📱 Responsive UI Build responsive layouts easily
🧩 Reusability Create reusable React components
🧹 Less custom CSS Reduce the need for separate CSS rules

For example, instead of writing separate CSS rules:

.card { padding: 20px; background-color: #ffffff; border-radius: 12px; }

You can use Tailwind utility classes directly in JSX:

<div className="rounded-xl bg-white p-5 shadow-md"> <h2 className="text-xl font-bold text-gray-800"> Hello SharePoint! </h2> </div>

Simple, readable and convenient! ✨

👨‍💻 Who Can Benefit From This?

This CLI can be useful for:

  • SPFx developers who prefer Tailwind CSS.
  • React developers building SharePoint solutions.
  • Developers starting new SPFx projects.
  • Developers who want to simplify repetitive setup tasks.

🔮 What's Next?

This is just the beginning!

I want to continue improving the CLI, make the setup experience smoother and explore more ways to simplify SPFx development.

I'm also interested in hearing feedback from other developers.

If you try it, let me know what you think!

🤝 Let's Connect!

If you're working with SharePoint, SPFx, React or Microsoft 365, I'd love to connect with you.

You can explore my work and follow my development journey here:

🎯 Final Thoughts

This project started with a simple thought: why spend time repeating configuration steps when we can automate them?

Building this CLI gave me an opportunity to explore developer tooling and make something that could help other developers.

Keep learning. Keep building. Keep sharing! 🚀

Thanks for reading! ❤️

If you found this useful, consider leaving a comment or sharing your feedback.

Tags

sharepoint spfx tailwindcss typescript opensource