workflow: added TailwindCSS; workflow: removed watch:style script from dev script

.gitignore

@@ -30,3 +30,4 @@ yarn-error.log*
 
 # Private configs
 /config.py
+tailwind.config.full.js

package.json

@@ -14,9 +14,9 @@
 		"watch:js": "rollup -c -w",
 		"serve": "python ../server.py",
 		"serve:gui": "python ../deemix-pyweb.py --dev",
-		"dev": "npm-run-all --parallel serve watch:js watch:styles",
-		"dev:gui": "npm-run-all --parallel serve:gui watch:js watch:styles",
-		"build": "npm-run-all --sequential clean build:js build:styles"
+		"dev": "npm-run-all --parallel serve watch:js",
+		"dev:gui": "npm-run-all --parallel serve:gui watch:js",
+		"build": "npm-run-all --sequential clean build:js"
 	},
 	"dependencies": {
 		"flag-icon-css": "^3.5.0",
@@ -35,13 +35,16 @@
 		"@rollup/plugin-replace": "^2.3.2",
 		"node-sass": "^4.14.1",
 		"npm-run-all": "^4.1.5",
+		"postcss": "^8.1.1",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.14.0",
 		"rollup-plugin-analyzer": "^3.2.3",
+		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-svg": "^2.0.0",
 		"rollup-plugin-terser": "^6.1.0",
 		"rollup-plugin-vue": "^4.2.0",
 		"sass": "^1.26.8",
+		"tailwindcss": "^1.8.12",
 		"vue-template-compiler": "^2.6.12"
 	}
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+}

public/index.html

@@ -8,7 +8,7 @@
 		<link rel="stylesheet" type="text/css" href="/css/vendor/material-icons.css">
 		<link rel="stylesheet" type="text/css" href="/css/vendor/OpenSans.css">
 		<link rel="stylesheet" type="text/css" href="/css/vendor/toastify.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
+
 		<link rel="shortcut icon" href="/favicon.ico">
 		<meta name="viewport"
 			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
@@ -24,7 +24,6 @@
 	</body>
 
 	<script type="text/javascript" src="/js/vendor/socket.io.js"></script>
-
 	<script src="/js/bundle.js"></script>
 
 </html>

rollup.config.js

@@ -6,10 +6,12 @@ import alias from '@rollup/plugin-alias'
 import analyze from 'rollup-plugin-analyzer'
 import vue from 'rollup-plugin-vue'
 import svg from 'rollup-plugin-svg'
+import postcss from 'rollup-plugin-postcss'
 
-// 'rollup -c' -> 'production' is false
+// 'rollup -c' 		-> 'production' is false
 // 'rollup -c -w' -> 'production' is true
 const production = !process.env.ROLLUP_WATCH
+process.env.NODE_ENV = production ? 'production' : 'development'
 
 export default {
 	input: 'src/app.js',
@@ -39,11 +41,12 @@ export default {
 		}),
 		// Needed for Vue imports
 		replace({
-			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
+			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 		}),
 		resolve(), // Tells Rollup how to find imported modules in node_modules
 		commonjs(), // Converts imported modules to ES modules, if necessary
 		svg(),
+		postcss(),
 		vue(),
 		production && terser(), // Minify, but only in production
 		production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production

src/app.js

@@ -5,6 +5,7 @@ window.vol = {
 	preview_max_volume: 100
 }
 
+import '@/styles/scss/style.scss'
 import App from '@/App.vue'
 import i18n from '@/plugins/i18n'
 import router from '@/router'

src/styles/scss/style.scss

@@ -1,3 +1,7 @@
+@import '~tailwindcss/base';
+@import '~tailwindcss/components';
+@import '~tailwindcss/utilities';
+
 // SASS only
 @import './base/variables';
 

tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	future: {
+		removeDeprecatedGapUtilities: true,
+		purgeLayersByDefault: true
+	},
+	purge: ['./src/**/*.html', './src/**/*.vue'],
+	theme: {
+		extend: {}
+	},
+	variants: {},
+	corePlugins: {
+		preflight: false
+	},
+	plugins: []
+}