Skip to content

Instantly share code, notes, and snippets.

@tombohub
Last active Oct 19, 2020
Embed
What would you like to do?
Tailwindcss installation and setup script for create-react-app
/**
* 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)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment