Advertisement
bitsnaps

TaildwinCSS Initialization Script

Nov 3rd, 2023 (edited)
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.65 KB | Source Code | 0 0
  1. /**
  2.  * This script allows you to spin up a new TailwindCSS project, it doesn't use any fancy hack of Node, it just simplifies the process of creating a new Node project with TailwindCSS default configuration.
  3.  * Usage: node init-tailwind.js
  4.  */
  5. const fs = require('fs');
  6. const path = require('path');
  7. const readline = require('readline');
  8. const { exec } = require('child_process');
  9.  
  10. // Constants
  11. const DEFAULT_PROJECT_NAME = 'hello-tailwind';
  12. const DEFAULT_VERSION = '1.0.0';
  13. const DEFAULT_MAIN_FILE = 'index.js';
  14. const DEFAULT_LICENSE = 'MIT';
  15.  
  16. function printEndScript() {
  17.     console.log('\nNotes:');
  18.     console.log('- Now, you can run: "npm install -D tailwindcss" if you want.');
  19.     console.log('- if you want to use "start" command you should: "npm install -g http-server".\n');
  20. }
  21.  
  22. // Create readline interface
  23. const rl = readline.createInterface({
  24.     input: process.stdin,
  25.     output: process.stdout
  26. });
  27.  
  28. console.log('This script will walk you through creating a new TailwindCSS project structure:\nPress ^C at any time to quit.\n');
  29.  
  30. // Ask for user input
  31. rl.question('Would you like to install TailwindCSS [Y/N]? (Y): ', (doInstall) => {
  32.     rl.question(`package name (${DEFAULT_PROJECT_NAME}): `, (name) => {
  33.         rl.question(`version (${DEFAULT_VERSION}): `, (version) => {
  34.             rl.question('description: ', (description) => {
  35.                 rl.question(`entry point (${DEFAULT_MAIN_FILE}): `, (main) => {
  36.                     rl.question('author: ', (author) => {
  37.                         rl.question(`license (${DEFAULT_LICENSE}): `, (license) => {
  38.  
  39.                             // Use default values if user didn't provide any input
  40.                             doInstall = doInstall.toLowerCase()[0] || 'y';
  41.                             name = name || DEFAULT_PROJECT_NAME;
  42.                             version = version || DEFAULT_VERSION;
  43.                             description = description || '';
  44.                             main = main || DEFAULT_MAIN_FILE;
  45.                             author = author || '';
  46.                             license = license || DEFAULT_LICENSE;
  47.  
  48.                             // Create an empty Node.js project
  49.                             const packageJson = {
  50.                                 name,
  51.                                 version,
  52.                                 description,
  53.                                 main,
  54.                                 scripts: {
  55.                                     build: 'npx tailwindcss -i ./src/input.css -o ./build/css/style.css'
  56.                                 },
  57.                                 author,
  58.                                 license
  59.                             };
  60.                             //fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));
  61.  
  62.                             // Add a "build" script to "package.json"
  63.                             packageJson.scripts = {
  64.                                 ...packageJson.scripts,
  65.                                 "dev": 'npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch',
  66.                                 "build": 'npx tailwindcss -i ./src/input.css -o ./build/css/style.css',
  67.                                 "start": 'http-server ./build',
  68.                             };
  69.                             fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));
  70.  
  71.                             // Create "tailwind.config.js" file
  72.                             fs.writeFileSync(path.join('tailwind.config.js'),
  73.                                 `/** @type {import('tailwindcss').Config} */
  74. module.exports = {
  75.    content: ["./build/**/*.{html,js,ts}"],
  76.    theme: {
  77.        extend: {}
  78.    },
  79.    plugins: [],
  80. }
  81. `);
  82.  
  83.                             // Create "build" directory with a boilerplate "index.html" file
  84.                             fs.mkdirSync('build', { recursive: true });
  85.                             fs.writeFileSync(path.join('build', 'index.html'),
  86.                                 `<!DOCTYPE html>
  87. <html>
  88. <head>
  89.    <link rel="stylesheet" href="css/style.css">
  90. </head>
  91. <body>
  92.    <div class="bg-red-500"><h1>It works!</h1></div>
  93. </body>
  94. </html>
  95. `);
  96.  
  97.                             // Create "src" directory with a "input.css" file
  98.                             fs.mkdirSync('src', { recursive: true });
  99.                             fs.writeFileSync(path.join('src', 'input.css'),
  100.                                 `@tailwind base;
  101. @tailwind components;
  102. @tailwind utilities;
  103. `);
  104.  
  105.                             console.log(`\nGenerated files:
  106. build/index.html
  107. src/input.css
  108. package.json
  109. tailwind.config.js
  110. \n`);
  111.  
  112.                             // Install Tailwind CSS
  113.                             if (doInstall == 'y') {
  114.                                 console.log('Installing TailwindCSS... please wait.');
  115.                                 exec('npm install tailwindcss -D', (error) => {
  116.                                     if (error) {
  117.                                         console.error(`exec error: ${error}`);
  118.                                         return;
  119.                                     } else {
  120.                                         console.log('TailwindCSS seems to be installed successfully.');
  121.                                         printEndScript();
  122.                                     }
  123.                                 });
  124.                             } else {
  125.                                 printEndScript();
  126.                             }
  127.  
  128.                             // Close readline interface
  129.                             rl.close();
  130.                         });
  131.                     });
  132.                 });
  133.             });
  134.         });
  135.     });
  136. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement