diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | postcss.config.js | 6 | ||||
| -rw-r--r-- | src/App.vue | 19 | ||||
| -rw-r--r-- | src/index.css | 3 | ||||
| -rw-r--r-- | src/main.js | 1 | ||||
| -rw-r--r-- | tailwind.config.js | 10 |
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: [], +} |