Add tailwind and prettier

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+compiled.css

.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+package.json
+src/css/compiled.css

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120,
+    "arrowParens": "avoid"
+}

package.json

@@ -1,39 +1,47 @@
 {
-  "name": "framework-matcher",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "typescript": "~3.7.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "framework-matcher",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@testing-library/jest-dom": "^4.2.4",
+		"@testing-library/react": "^9.3.2",
+		"@testing-library/user-event": "^7.1.2",
+		"@types/jest": "^24.0.0",
+		"@types/node": "^12.0.0",
+		"@types/react": "^16.9.0",
+		"@types/react-dom": "^16.9.0",
+		"autoprefixer": "^9.8.4",
+		"cssnano": "^4.1.10",
+		"postcss-cli": "^7.1.1",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"react-scripts": "3.4.1",
+		"tailwindcss": "^1.4.6",
+		"typescript": "~3.7.2"
+	},
+	"scripts": {
+		"start": "npm run build:css && react-scripts start --no-cache",
+		"build": "npm run build:css && react-scripts build",
+		"build:css": "postcss build src/css/tailwind.css -o src/css/compiled.css",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject"
+	},
+	"eslintConfig": {
+		"extends": "react-app"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"prettier": "^2.0.5"
+	}
 }

postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss')
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+
+module.exports = {
+	plugins: [tailwindcss, autoprefixer, ...(process.env.NODE_ENV === 'production' ? [cssnano] : [])],
+}

src/css/tailwind.css

@@ -0,0 +1,9 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+.is-flipped {
+    transform: rotateY(180deg);
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	purge: ['./src/**/*.tsx'],
+	theme: {
+		extend: {},
+	},
+	variants: {},
+	plugins: [],
+}