src/components/HelloWorld.vue
<template>
<div class="h-screen flex">
<div class="w-1/2 bg-gradient-to-r from-green-500 to-blue-900"></div>
<div class="w-1/2 bg-beige"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
.bg-beige {
background-color: #f5f5dc; /* Color beige */
}
</style>
src/App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/styles.css';
createApp(App).mount('#app')
src/assets/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
This project structure was created using the vue create command:
https://i.sstatic.net/65S4SUiB.png
The background should be a gradient of green and blue with half beige based on the style "from-green-500 to-blue-900," but it is not displaying correctly. Here is how it looks: https://i.sstatic.net/MBSqkRdp.png
The logo file is named as logo.png, which does not seem to be the issue. What could I possibly be missing?