Tailwindcss installation and setup script for create-react-app

tailwind-setup.js

/**
 * Tailwind installation and setup script
 *
 * STEPS:
 * Installs tailwindcss
 * creates src/assets/css folder to hold main.css and tailwind.css
 * initializes full tailwind configuration file
 * inserts new package.json scripts commands
 *
 * NOTE: you have to import main.css in src/index.js
 */

const { execSync } = require("child_process");
const fs = require("fs");

/* ------------------------------ Configuration ----------------------------- */

// directory to keep the css files
const cssDirectory = "src/assets/css";

// main css file which it needs to be imported inside index.js
const mainCssFile = cssDirectory + "/main.css";

// tailwind css holding the tailwind directives
const tailwindCssFile = cssDirectory + "/tailwind.css";

// tailwind directives
const tailwindCssStartData = `@tailwind base; 
@tailwind components; 
@tailwind utilities;`;

// scripts commands to insert into package.json
const tailwindScripts = {
  "build:tailwind": `tailwindcss build ${tailwindCssFile} -o ${mainCssFile}`,
  prestart: "npm run build:tailwind",
  prebuild: "NODE_ENV=production npm run build:tailwind",
};

/* ------------------------------ Installation ------------------------------ */

execSync("npm install tailwindcss");
execSync("npx tailwindcss init --full");

fs.mkdirSync(cssDirectory, { recursive: true });

fs.writeFileSync(tailwindCssFile, tailwindCssStartData);

const packageConfig = JSON.parse(
  fs.readFileSync("package.json", "utf8")
);

packageConfig.scripts = Object.assign(
  tailwindScripts,
  packageConfig.scripts
);

fs.writeFileSync(
  "package.json",
  JSON.stringify(packageConfig, null, 2)
);