Install tailwindcss

6 files changed, 26 insertions, 16 deletions

diff --git a/package.json b/package.json
index 4a947cd..95eeebb 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^2.2.0",
+		"autoprefixer": "^10.4.2",
+		"postcss": "^8.4.7",
+		"tailwindcss": "^3.0.23",
 		"vite": "^2.8.0"
 	}
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..1b69d43
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}
diff --git a/src/App.vue b/src/App.vue
index 0456388..10537d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,25 +11,12 @@ export default {
 </script>
 
 <template>
-	<div id="grid">
+	<div class="bg-black flex flex-row flex-wrap justify-center">
 		<img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name"
-			@click="$event.target.style.transform = 'translate(20%,30%)'"/>
+			@click="$event.target.style.transform = 'translate(20%,30%)'"
+			class="m-1 flex-auto transition-transform duration-300"/>
 	</div>
 </template>
 
 <style>
-#app {
-	background-color: black;
-}
-#grid {
-	display: flex;
-	flex-flow: row wrap;
-	justify-content: center;
-}
-img {
-	margin: 5px;
-	flex: auto;
-	transition: transform 1s;
-	max-width: 100%;
-}
 </style>
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.js b/src/main.js
index 01433bc..50a4dab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './index.css'
 
 createApp(App).mount('#app')
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..fa25f55
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+	content: [
+		"./index.html",
+		"./src/**/*.{vue,js,ts,jsx,tsx}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}