API tools faq
paste
Advertisement
bitsnaps

TaildwinCSS Initialization Script

bitsnaps
Nov 3rd, 2023 (edited)
45
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.65 KB | Source Code | 0 0
raw download clone embed print report
  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. });
Tags: Script node tailwind
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!