OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to specify the color in a class in Vue?

  • Thread starter Thread starter OK 400
  • Start date Start date
O

OK 400

Guest
src/components/HelloWorld.vue

Code:
<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

Code:
<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

Code:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/styles.css';

createApp(App).mount('#app')

src/assets/styles.css

Code:
@tailwind base;
@tailwind components;
@tailwind utilities;

This is the project structure (done with vue create command): vue project structure

Based on the style "from-green-500 to-blue-900", the background should be half gradient half beige, but this is what it looks like: localhost image

The logo is logo.png, which is not the problem. What am I missing?

<p><strong>src/components/HelloWorld.vue</strong></p>
<pre><code><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>

</code></pre>
<p><strong>src/App.vue</strong></p>
<pre><code><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>
</code></pre>
<p><strong>src/main.js</strong></p>
<pre><code>import { createApp } from 'vue'
import App from './App.vue'
import './assets/styles.css';

createApp(App).mount('#app')
</code></pre>
<p><strong>src/assets/styles.css</strong></p>
<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<p>This is the project structure (done with <code>vue create</code> command):
<a href="https://i.sstatic.net/65S4SUiB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/65S4SUiB.png" alt="vue project structure" /></a></p>
<p>Based on the style "from-green-500 to-blue-900", the background should be half gradient half beige, but this is what it looks like:
<a href="https://i.sstatic.net/MBSqkRdp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MBSqkRdp.png" alt="localhost image" /></a></p>
<p>The logo is <code>logo.png</code>, which is not the problem. What am I missing?</p>
 

Latest posts

Top