🎐 Tailwindcss setup (#272)

* ✨ Added tailwindcss

* 🔥 Removed useless types from root

.eslintignore

@@ -1,3 +1,5 @@
 web/source/typings/vendor.d.ts
 
 server/source/prisma/
+
+tailwind.config.js

.yarnrc.yml

@@ -3,3 +3,8 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
 
 yarnPath: .yarn/releases/yarn-sources.cjs
+
+packageExtensions:
+  '@fullhuman/postcss-purgecss@*':
+    peerDependencies:
+      'postcss': '*'

package.json

@@ -25,8 +25,10 @@
 		"eslint-plugin-react": "latest",
 		"gitmoji-cli": "^3.2.12",
 		"husky": "^6.0.0",
+		"postcss": "^8.2.10",
 		"prettier": "^2.2.1",
 		"prettier-plugin-jsdoc": "^0.2.12",
+		"tailwindcss": "^2.1.1",
 		"typescript": "^4.1.3"
 	},
 	"homepage": "https://github.com/vegeta897/d-zone#readme",

server/package.json

@@ -11,7 +11,9 @@
 		"@babel/preset-react": "^7.13.13",
 		"@babel/preset-typescript": "^7.13.0",
 		"@prisma/client": "^2.20.1",
+		"autoprefixer": "^10.2.5",
 		"babel-loader": "^8.2.2",
+		"css-loader": "^5.2.4",
 		"dotenv": "^8.2.0",
 		"eris": "^0.15.0",
 		"eventemitter3": "^4.0.7",
@@ -21,9 +23,13 @@
 		"koa-compose": "^4.1.0",
 		"koa-static": "^5.0.0",
 		"koa-webpack": "^6.0.0",
+		"mini-css-extract-plugin": "^1.5.0",
 		"pnp-webpack-plugin": "^1.6.4",
+		"postcss": "^8.2.10",
+		"postcss-loader": "v4",
 		"prisma": "^2.20.1",
 		"socket.io": "^4.0.1",
+		"tailwindcss": "^2.1.1",
 		"tslog": "^3.1.2",
 		"webpack": "4",
 		"webpack-hot-client": "^4.2.0"
@@ -35,8 +41,10 @@
 		"@types/koa-compose": "^3.2.5",
 		"@types/koa-static": "^4.0.1",
 		"@types/koa-webpack": "^6",
+		"@types/mini-css-extract-plugin": "^1",
 		"@types/node": "^14.14.37",
 		"@types/speed-measure-webpack-plugin": "^1",
+		"@types/tailwindcss": "^2",
 		"@types/webpack": "4",
 		"@types/webpack-hot-client": "^4",
 		"ts-node": "^9.1.1",

server/source/http/web/config.ts

@@ -1,11 +1,14 @@
 import { Configuration } from 'webpack'
 import HTMLWebpackPlugin from 'html-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import MiniCSSExtactWebpackPlugin from 'mini-css-extract-plugin'
 // @ts-expect-error No types
 import PNPWebpackPlugin from 'pnp-webpack-plugin'
+import tailwindcss from 'tailwindcss'
 
 import { join } from 'path'
 export const root = (path = '') => join(process.cwd(), '../web', path)
+const glob = (path: string) => root().replace('\\', '/') + path
 
 const configuration = (dev: boolean): Configuration => ({
 	mode: dev ? 'development' : 'production',
@@ -36,6 +39,32 @@ const configuration = (dev: boolean): Configuration => ({
 					},
 				},
 			},
+			{
+				test: /\.css$/,
+
+				use: [
+					MiniCSSExtactWebpackPlugin.loader,
+					require.resolve('css-loader'),
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							implementation: require('postcss'),
+
+							postcssOptions: {
+								plugins: [
+									require('autoprefixer'),
+
+									tailwindcss({
+										...require(root('../tailwind.config')),
+
+										purge: [glob('/**/*.tsx'), glob('./**/*.html')],
+									}),
+								],
+							},
+						},
+					},
+				],
+			},
 		],
 	},
 
@@ -48,6 +77,8 @@ const configuration = (dev: boolean): Configuration => ({
 				typescriptPath: require.resolve('typescript'),
 			},
 		}),
+		// @ts-expect-error Webpack V4 and V5 types do not match
+		new MiniCSSExtactWebpackPlugin(),
 	],
 
 	resolve: {

server/source/main.ts

@@ -13,13 +13,16 @@ import { createHTTPServer } from './http'
 
 /** Main entry point for runtime */
 async function main() {
+	const logger = new Logger()
+
 	const DISCORD_TOKEN = process.env['DISCORD_TOKEN']
 	const PORT = process.env['PORT'] || 8080
-	const DEV = !process.env['PRODUCTION']
+	const DEV = process.env['NODE_ENV'] !== 'production'
+
+	logger.info(`Development mode`, DEV)
 
 	if (!DISCORD_TOKEN) throw new Error('DISCORD_TOKEN not set')
 
-	const logger = new Logger()
 	const prisma = new PrismaClient()
 
 	const httpServer = http.createServer(

tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	purge: [],
+	darkMode: false,
+	theme: {
+		extend: {},
+	},
+	variants: {},
+	plugins: [],
+}

web/package.json

@@ -10,11 +10,13 @@
 		"pixi.js-legacy": "^5.3.7",
 		"react": "^16.8.0",
 		"react-dom": "^16.8.0",
-		"socket.io-client": "^4.0.1"
+		"socket.io-client": "^4.0.1",
+		"tailwindcss": "^2.1.1"
 	},
 	"devDependencies": {
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^17.0.0",
+		"@types/tailwindcss": "^2",
 		"root": "link:./source",
 		"server": "workspace:server",
 		"typescript": "^4.1.3"

web/source/App.tsx

@@ -3,7 +3,9 @@ import Game from './components/game'
 
 export const App = () => {
 	return (
-		<div>
+		<div className="flex flex-col items-center">
+			<h1 className="m-2 font-bold text-4xl">D Zone</h1>
+
 			<Game />
 		</div>
 	)

web/source/main.tsx

@@ -1,3 +1,4 @@
+import 'tailwindcss/tailwind.css'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { App } from './App'