diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 19 | ||||
| -rw-r--r-- | src/index.css | 3 | ||||
| -rw-r--r-- | src/main.js | 1 |
3 files changed, 7 insertions, 16 deletions
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') |