try out tailwind

package.json

@@ -1,16 +1,19 @@
 {
   "scripts": {
     "start": "webpack serve --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js",
+    "build": "export NODE_ENV=production && webpack --config webpack.prod.js",
     "get-bundle-size": "webpack --profile --json > stats.json --config webpack.prod.js && webpack-bundle-analyzer stats.json dist/",
     "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true -m"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-react": "^7.12.13",
+    "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.1.3",
     "gh-pages": "^3.1.0",
+    "postcss": "^8.2.9",
+    "postcss-loader": "^5.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.3",
@@ -20,6 +23,7 @@
     "sass-loader": "^11.0.1",
     "stats-js": "^1.0.1",
     "style-loader": "^2.0.0",
+    "tailwindcss": "^2.0.4",
     "three": "^0.126.1",
     "webpack": "^5.26.3",
     "webpack-bundle-analyzer": "^4.4.0",

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+      require('tailwindcss'),
+  ]
+}

src/app.css

@@ -1,9 +1,8 @@
 
-#react {
+
-  // position: absolute;
+@tailwind base;
-  // right:0;
+@tailwind components;
-  // bottom:0;
+@tailwind utilities;
-}
 
 .buttons-group {
   position: absolute;
@@ -13,9 +12,8 @@
 }
 
 
-.feature-tree {
+/* .feature-tree {
   color: red;
   position: absolute;
   right:0;
-  // bottom:0;
+} */
-}

src/app.jsx

@@ -1,7 +1,7 @@
 
 
 import React, { useEffect, useState } from 'react';
-import './app.scss'
+import './app.css'
 
 import { Provider, useDispatch, useSelector } from 'react-redux'
 // import { sc } from './index'
@@ -49,9 +49,9 @@ const App = () => {
       {/* <button onClick={() => setState('')}> test </button> */}
     </div>
 
-    <div className='feature-tree'>
+    <div className='absolute right-0'>
       {treeEntries.allNids.map((entId, idx) => (
-        <div key={idx}
+        <div className='text-red-700 text-4xl' key={idx}
           onClick={() => {
             if (activeSketchNid) {
               treeEntries.byNid[activeSketchNid].deactivate()
@@ -59,7 +59,9 @@ const App = () => {
             treeEntries.byNid[entId].activate()
           }
           }
-        >{entId}</div>
+        >
+          {entId}
+        </div>
       ))}
     </div>
 

tailwind.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  purge: [
+    './src/**/*.jsx'
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

webpack.common.js

@@ -12,16 +12,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.s[ac]ss$/i,
+        test: /\.css$/i,
-        use: [
+        exclude: /node_modules/,
-          // Creates `style` nodes from JS strings
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
-          "style-loader",
-          // Translates CSS into CommonJS
-          "css-loader",
-          // Compiles Sass to CSS
-          "sass-loader",
-        ],
       },
+
+
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,