'Create-react-tailwindcss ' an npm package to setup react-tailwindcss configuration

Viraj kulkarni — Fri, 26 Jan 2024 14:03:32 +0000

Introduction to NPM

NPM (node package manager) is the world's largest registry, which has millions of packages that enable the developers to collaborate and help each other to build and develop projects An NPM package is a reusable piece of code that you can download and install into your projects, encapsulating functionality or as dependencies to install and use the functionality, for example, installing readline module in javascript to access input from terminal where these packages that can be easily shared across different projects or even with the community at large.

What Are npm Starter Commands?

npm starter commands are specialized scripts that automate the initialization of projects. They provide a shortcut to set up a project with predefined configurations, dependencies, and folder structures. Imagine sparing yourself with the manual steps and complexities of project initialization.

About project

The create-react-tailwindcss is an npm-based starter command that simplifies the process of setting up a react project with tailwind CSS. I came up with the idea for "create-react-tailwindcss" when I was learning MERN stack with Tailwind CSS as a beginner. Setting up projects with Tailwind CSS was a repetitive task. So, I created this npm package to automate the setup process. Now, developers can focus more on their actual code and less on the hassle of configuring each new project.

Who can use it?

Beginners: Streamline setup and focus on learning React-Tailwind CSS.
Programmers/Developers: Quickly initiate projects, saving time on repetitive configurations for React with Tailwind CSS.

Why to use it?

Efficient Start: Avoid repetitive configuration tasks and quickly initiate new projects.
Time Saver: Speeds up the initial setup, letting you focus more on development tasks.

Performance

Note: The time taken for installation is compared between installing with my package and installing without it and the time taken will also depend on internet speed and storage of respective drives.

Using my package with 5 mbps internet speed

On average, the installation process using the specified method is expected to take 2-3 minutes with internet speed of 5 mbps.

Building process

Prerequisites to build

Nodejs (from 18.0.0)
Npm
Commander
Understanding about
- Javascript
- nodejs
- react-tailwindcss

Folder structure

.
└── main folder/
    ├── node_modules
    ├── index.js
    ├── package-lock.json
    ├── package.json
    ├── Readme.md
    └── LICENSE

Note: The above folder structure defined is after installing the all dependencies and packages.

Initialization of project and installing all dependencies

Start by initializing the project folder

Step 1:

Create package .json

npm init

Changes in package.json

{
  "name": "create-react-tailwindcss",
  "version": "1.0.2",
  "description": "",
  "main": "index.js",
  "bin": {
    "create-react-tailwindcss": "./index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npx",
    "npm",
    "react",
    "tailwindcss",
    "vite",
    "react-tailwindcss"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "commander": "^11.1.0"
  }
}

Install commander

commander is a Node.js library for creating command-line interfaces with ease. It simplifies the process of defining and parsing command-line options, making it straightforward to build powerful and user-friendly command-line applications.

npm install commander

Step 2: core logic

The fundamental functionality of the package is built in JavaScript within the index.js file, encapsulating the core logic for the npm package.

// Define a function to create a React project with Tailwind CSS using Vite
function createReactTailwindCSSVite(projectName) {
    // Resolve the absolute path for the project
    const projectPath = resolvePath(projectName);

    // Check if the directory already exists
    if (directoryExists(projectPath)) {
        printError(`Error: Directory "${projectName}" already exists.`);
        exit(1);
    }

    // Display a message indicating the creation of a new React project with Tailwind CSS using Vite
    print(`Creating a new React project with Tailwind CSS using Vite: ${projectName}`);

    // Execute commands to set up the React project and install dependencies
    executeCommand(`npx create-vite ${projectName} --template react`, { stdio: 'inherit' });
    executeCommand(`cd ${projectPath} && npm install -D tailwindcss@latest postcss@latest autoprefixer@latest`, { stdio: 'inherit' });
    executeCommand(`cd ${projectPath} && npx tailwindcss init -p`, { stdio: 'inherit' });

    // Update index.css with Tailwind CSS styles
    const indexPath = joinPath(projectPath, 'src', 'index.css');
    const newIndexContent = `
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
    `;

    updateFileContent(indexPath, newIndexContent);

    // Update tailwind.config.js with the Tailwind CSS configuration
    const configPath = joinPath(projectPath, 'tailwind.config.js');
    const newConfigContent = `
        /** @type {import('tailwindcss').Config} */
        export default {
          content: [
            "./index.html",
            "./src/**/*.{js,ts,jsx,tsx}",
          ],
          theme: {
            extend: {},
          },
          plugins: [],
        }
    `;

    updateFileContent(configPath, newConfigContent);

    // Display a message indicating the successful completion of the setup
    print('Setup completed successfully!');
}

// Define a function to update the content of a file
function updateFileContent(filePath, newContent) {
    try {
        writeFile(filePath, newContent);
        print(`File ${filePath} updated successfully.`);
    } catch (error) {
        printError(`Error updating file ${filePath}: ${error.message}`);
    }
}

Step 3:

To convert index.js as executable file use

chmod +x index.js

Step 4:

Test locally using npm link in the main package folder and create a new folder

Folder structure for testing

.
└── main folder/
    ├── project package
    └── testing folder

Step 5:

Use to run

 npx create-react-tailwindcss <project-name>

Get Started - in usage

Note: for understanding more about project visit my github repo link -https://github.com/virumons/RVT-NPM.

Thank you for Reading :)

DEV Community: Viraj kulkarni