Back

petterinit

Automate setup for TailwindCSS in React, Vue, and SvelteKit.

Status

Finished

My Role(s)

  • Solo Developer

Technologies

  • JavaScript

  • npm

  • GitHub

  • VitePress

  • Netlify

About

At one point I found myself repeating the same steps to setup TailwindCSS for my new projects. Browsing to the setup guide, installing dependencies, copy pasting configuration files, etc. Since I often created small projects to test an idea, I decided to automate these dull steps. petter-init is a CLI tool you can install from npmjs.com. The tool lets you choose either React, Vue, or SvelteKit, scaffolds a new project with your selected options, and completely configures TailWindCSS for your project. You can instantly start typing out TailwindCSS-classes instead having to manually setup it up first. For a detailed explanation on how it works, you can visit the docs for this project.

Challenges

Before I wrote the code I found it difficult to gauge the size of this project. Initially, I thought this would be a small one-file script, and therefore choose to use JavaScript. In retrospect, I should have chosen TypeScript for this project. When I came back to this project to fix a bug, or update the templates, I found myself lost, despite the detailed documentation. The development experience with JavaScript compared to TypeScript is just horrible. Additionally, using TypeScript would make it easier if other developers wanted to work on the project. Migrating to TypeScript would be beneficially, however I never got around to doing it. Another challenge was testing. To ensure the scaffolding of projects worked properly, I relied on tests. The tests scaffold a project for each framework I support, and check that the proper files are created within the new project. These tests are helpful, but they do take a while to complete. However, these tests only ensures that the files are created. This does not mean that Tailwind is working correctly. I realized that I have to make tests that the application can run, and Tailwind classes are working properly.

Results

The result of this project spans a CLI tool available as a global npm package, and a docs website made with Vitepress. I learned how to publish packages to npm, and enhanced my testing skills. The tool have saved me a lot of time setting up TailwindCSS, and I will continue to update the project. Despite the challenges mentioned, I am thoroughly satisified with the result.

Links