Tailwind css

package.json

@@ -373,6 +373,8 @@
 		"@types/react-dom": "17.0.0",
 		"@types/vscode": "1.51.0",
 		"@vscode/codicons": "0.0.20",
+		"autoprefixer": "^10.3.2",
+		"css-loader": "5.2.7",
 		"date-fns": "2.0.1",
 		"downshift": "6.0.6",
 		"glob": "7.1.6",
@@ -380,8 +382,12 @@
 		"html-loader": "1.3.2",
 		"html-webpack-plugin": "4.5.0",
 		"mdast-util-from-markdown": "1.0.0",
+		"postcss": "^8.3.6",
+		"postcss-loader": "4.3.0",
 		"react": "17.0.1",
 		"react-dom": "17.0.1",
+		"style-loader": "2.0.0",
+		"tailwindcss": "^2.2.7",
 		"ts-loader": "8.0.3",
 		"tslint": "6.1.3",
 		"typescript": "4.0.2",

postcss.config.js

@@ -0,0 +1,8 @@
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ],
+};

src/viewpanel/index.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { render } from "react-dom";
 import { ViewPanel } from "./ViewPanel";
 
+import './styles.css';
+
 // require('@vscode/codicons/dist/codicon.css');
 import '@bendera/vscode-webview-elements/dist/vscode-table';
 import '@bendera/vscode-webview-elements/dist/vscode-table-header';

src/viewpanel/styles.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

tailwind.config.js

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

webpack.config.js

@@ -56,6 +56,10 @@ module.exports = [
           use: [{
             loader: 'ts-loader'
           }]
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader', 'postcss-loader']
         }
       ]
     },