add tailwind, bootstrap

Author: michael-yin

webpack_boilerplate/frontend_template/cookiecutter.json

@@ -1,5 +1,5 @@
 {
   "project_slug": "frontend",
   "run_npm_command_at_root": "y",
-  "style_solution": ["scss"]
+  "style_solution": ["tailwind", "bootstrap", "scss"]
 }

webpack_boilerplate/frontend_template/hooks/post_gen_project.py

@@ -29,7 +29,21 @@ def get_frontend_config_files():
         yield os.path.dirname(full_path), os.path.basename(full_path)
 
 
+def process_style_entry_file():
+    frontend_path = os.getcwd()
+
+    if "{{ cookiecutter.style_solution }}".lower() == "tailwind":
+        full_path = os.path.join(frontend_path, "src/styles/index.scss")
+        os.remove(full_path)
+    elif "{{ cookiecutter.style_solution }}".lower() in ["scss", "bootstrap"]:
+        full_path = os.path.join(frontend_path, "src/styles/index.css")
+        os.remove(full_path)
+
+
 def copy_frontend_config_files():
+    """
+    Copy frontend config files to the root directory
+    """
     for dirname, filename in get_frontend_config_files():
         old_full_path = os.path.join(dirname, filename)
         root_dir = os.path.dirname(dirname)
@@ -58,6 +72,8 @@ def main():
         update_webpack_path()
         copy_frontend_config_files()
 
+    process_style_entry_file()
+
     print_success_msg(
         f"Frontend app '{{ cookiecutter.project_slug }}' "
         f"has been created. "

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/.stylelintrc.json

@@ -1,17 +1,17 @@
-{% if cookiecutter.style_solution == 'scss' %}
+{% if cookiecutter.style_solution == 'tailwind' %}
 {
-  "extends": "stylelint-config-standard-scss",
+  "extends": "stylelint-config-standard",
   "rules": {
-    "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true,
-    "scss/at-import-partial-extension": null
+    "at-rule-no-unknown": null
   }
 }
-{% elif cookiecutter.style_solution == 'tailwind' %}
+{% else %}
 {
-  "extends": "stylelint-config-standard",
+  "extends": "stylelint-config-standard-scss",
   "rules": {
-    "at-rule-no-unknown": null
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "scss/at-import-partial-extension": null
   }
 }
 {% endif %}

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/package.json

@@ -41,6 +41,14 @@
     "sass": "1.77.6",
     "sass-loader": "^16.0.1",
     "stylelint-config-standard-scss": "^14.0.0",
+{% elif cookiecutter.style_solution == 'tailwind' %}
+    "tailwindcss": "^4.0.3",
+    "@tailwindcss/postcss": "^4.0.3",
+{% elif cookiecutter.style_solution == 'bootstrap' %}
+    "sass": "1.77.6",
+    "sass-loader": "^16.0.1",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "bootstrap": "^5.3.3",
 {% endif %}
     "style-loader": "^4.0.0",
     "stylelint": "^16.14.1",

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/postcss.config.js

@@ -1,5 +1,13 @@
+{% if cookiecutter.style_solution == 'tailwind' %}
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}
+{% else %}
 const postcssPresetEnv = require("postcss-preset-env");
 
 module.exports = {
   plugins: [postcssPresetEnv()],
 };
+{% endif %}

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/src/application/app.js

@@ -1,4 +1,5 @@
-// This is the scss entry file
+{% if cookiecutter.style_solution == 'scss' %}
+// This is the style entry file
 import "../styles/index.scss";
 
 // We can import other JS file as we like
@@ -12,3 +13,36 @@ window.document.addEventListener("DOMContentLoaded", function () {
     new Jumbotron(elem);
   }
 });
+{% elif cookiecutter.style_solution == 'tailwind' %}
+// This is the style entry file
+import "../styles/index.css";
+
+// We can import other JS file as we like
+import Jumbotron from "../components/jumbotron";
+
+window.document.addEventListener("DOMContentLoaded", function () {
+  window.console.log("dom ready");
+
+  // Find elements and initialize
+  for (const elem of document.querySelectorAll(Jumbotron.selector())) {
+    new Jumbotron(elem);
+  }
+});
+{% elif cookiecutter.style_solution == 'bootstrap' %}
+// This is the style entry file
+import "../styles/index.scss";
+
+import "bootstrap/dist/js/bootstrap.bundle";
+
+// We can import other JS file as we like
+import Jumbotron from "../components/jumbotron";
+
+window.document.addEventListener("DOMContentLoaded", function () {
+  window.console.log("dom ready");
+
+  // Find elements and initialize
+  for (const elem of document.querySelectorAll(Jumbotron.selector())) {
+    new Jumbotron(elem);
+  }
+});
+{% endif %}

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/src/styles/index.scss

@@ -1,5 +1,20 @@
+{% if cookiecutter.style_solution == 'bootstrap' %}
+// If you comment out code below, bootstrap will use red as primary color
+// and btn-primary will become red
+
+// $primary: red;
+
+@import "~bootstrap/scss/bootstrap";
+
 .jumbotron {
   // should be relative path of the entry scss file
   background-image: url("../../vendors/images/sample.jpg");
   background-size: cover;
 }
+{% elif cookiecutter.style_solution == 'scss' %}
+.jumbotron {
+  // should be relative path of the entry scss file
+  background-image: url("../../vendors/images/sample.jpg");
+  background-size: cover;
+}
+{% endif %}

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/webpack/webpack.config.dev.js

@@ -65,7 +65,8 @@ module.exports = merge(common, {
             },
           },
           "postcss-loader",
-{% if cookiecutter.style_solution == 'scss' %}
+{% if cookiecutter.style_solution == 'tailwind' %}
+{% else %}
           "sass-loader",
 {% endif %}
         ],

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/webpack/webpack.config.prod.js

@@ -33,8 +33,9 @@ module.exports = merge(common, {
           MiniCssExtractPlugin.loader,
           "css-loader",
           "postcss-loader",
-{% if cookiecutter.style_solution == 'scss' %}
-      "sass-loader",
+{% if cookiecutter.style_solution == 'tailwind' %}
+{% else %}
+          "sass-loader",
 {% endif %}
         ],
       },

webpack_boilerplate/frontend_template/{{cookiecutter.project_slug}}/webpack/webpack.config.watch.js

@@ -53,7 +53,8 @@ module.exports = merge(common, {
             },
           },
           "postcss-loader",
-{% if cookiecutter.style_solution == 'scss' %}
+{% if cookiecutter.style_solution == 'tailwind' %}
+{% else %}
           "sass-loader",
 {% endif %}
         ],