Add support for tailwind (#115)

package.json

@@ -24,6 +24,7 @@
     "@polkadot/extension-inject": "^0.43.1",
     "@polkadot/react-identicon": "^2.0.1",
     "@polkadot/react-qr": "^2.0.1",
+    "autoprefixer": "^10.4.4",
     "nanostores": "^0.5.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -58,7 +59,6 @@
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.4.3",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.6.2",
     "process": "^0.11.10",
@@ -67,6 +67,7 @@
     "stylelint": "^14.7.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.6.3",
     "url-loader": "^4.1.1",
     "web-ext": "^6.8.0",

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/ui/components/AutosizeInput.tsx

@@ -46,7 +46,7 @@ const AutosizeInput: React.FC<Props> = ({
         onChange={handleChange}
         {...rest}
       />
-      <span className='border' />
+      <span className='bordered' />
     </div>
   )
 }
@@ -75,7 +75,7 @@ export default styled(AutosizeInput)`
     pointer-events: none;
   }
 
-  .border {
+  .bordered {
     position: absolute;
     right: 0;
     bottom: 0;

src/ui/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --size-max-width: 600px;
   --size-max-height: 600px;

tailwind.config.js

+module.exports = {
+  content: ['./src/**/*.tsx'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

webpack.config.js

@@ -40,29 +40,7 @@ module.exports = (env, argv) => ({
       },
       {
         test: /\.css$/i,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1,
-              modules: {
-                localIdentName:
-                  argv.mode === 'production'
-                    ? '[hash:base64]'
-                    : '[name]__[local]__[hash:base64]',
-              },
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: ['postcss-preset-env'],
-              },
-            },
-          },
-        ],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
       {
         test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.woff2?$/],