I am using TailwindCSS with my Laravel and Vue project.
The problem I am having is when I do
<h4 class="font-medium text-orange-500">
{{ movie.title }}
</h4>
The actual result is a black text.
When I do
<h4 class="font-medium text-white">
{{ status.title }}
</h4>
The text is white and it works.
So, the text can be changed to white but other than white color all appears as black. How can I fix this? To be honest, I have no idea where to look in the project to fix this issue.
To use TailwindCSS, I am using Laravel Breeze.
Orange is not one of the colors that's enabled out of the box in Tailwind. There is a palette for orange though, you just have to include it.
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
extend: {
colors: {
orange: colors.orange,
}
}
}
}
https://tailwindcss.com/docs/customizing-colors#color-palette-reference
Related
I'm trying to create a navbar using buefy. I want the navbar background color to have the primary-dark color from bulma. So I changed the sass variable primary to the original bulma primary color, which works.
To give it the primary dark color, I give it type has-background-primary-dark, doing only this make hovering on navbar-items weird, so I also gave it type is-primary. Which now does what I want.
However now when the page enters mobile view and displays the navbar-menu burger, and I click to extend the menu, the background color of the menu does not inherit the color from the navbar itself, thus it turns out white. I can style this using css, but I cannot figure out how to style the hover function.
Code:
<template>
<div id="app">
<b-navbar :fixed-top="true" type="has-background-primary-dark is-primary">
<template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/'}">
Madklub
</b-navbar-item>
</template>
<template #end>
<b-navbar-item class="is-white" tag="router-link" :to="{ path: '/about'}">
Log ind
</b-navbar-item>
<b-navbar-item class="is-white" tag="router-link" :to="{ path: '/about'}">
Registrer
</b-navbar-item>
</template>
</b-navbar>
<section class="is-primary hero is-fullheight">
<div class="hero-body">
<section class="section">
<router-view/>
</section>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
showMobileMenu: false
}
}
}
</script>
<style lang="scss">
// Import Bulma's core
#import "~bulma/sass/utilities/_all";
// Set your colors
$primary: hsl(171, 100%, 41%);
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
(
"primary": (
$primary,
$primary-invert,
$primary-light,
$primary-dark,
),
),
$custom-colors
);
// Import Bulma and Buefy styles
#import "~bulma";
#import "~buefy/src/scss/buefy";
</style>
Image:
How would I go about either making sure that the menu inherits the same color properties as the navbar itself, or style the menu to have the same color and hover color as the menu itself?
I'm trying to use a simple Tailwind date picker component in a svelte kit app, however the calendar popup is not appearing. I assume it has something to do with SRR. I was able to make some progress on the installation of Tailwind elements by importing the module with onMount():
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async() => {
if(browser) {
await import('tw-elements');
}
});
However, the calendar icon and the popup are still not rendering. (They also do not render when I include the CDN in app.html). Is there a solution?
tailwind.config.js (P.S. night wind works just fine):
module.exports = {
darkMode: "class",
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
extend: {},
},
plugins: [
require("nightwind"),
require("tw-elements/dist/plugin")
],
}
The docs are horrible, but it does work. Here's how I got it going.
In your Svelte Kit layout, import CSS for tw-elements and Font awesome. This is critical because the datepicker icon uses Font Awesome by default, and when you click the icon it opens the picker.
import 'tw-elements/dist/css/index.min.css'
import '#fortawesome/fontawesome-free/css/fontawesome.min.css'
import '#fortawesome/fontawesome-free/css/solid.css'
<div class="datepicker relative form-floating mb-3 xl:w-96">
<input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Select a date"/>
<label for="floatingInput" class="text-gray-700">Select a date</label>
</div>
In Svelte onMount:
// I didn't even need the if (browser) statement)
// import the library
onMount(async () => {
await import('tw-elements/dist/src/js/index.js')
})
It looks like it is using the MD Bootstrap Datepicker which is a premium feature of MDB Pro and is not free.
When I am try to do. It Change Background color of Icon
//This is my Code
export default function Preview() {
const [color, setColors] = React.useState("");
const handleClickButton = () => {
setColors(
"red"
)
};
return(
<div>
<a className="icons mr-3" onClick={()=> handleClickButton()} ><ion-icon name="heart-outline"
style= {{backgroundColor:color}}></ion-icon></a>
</div>
)
}
When I Click its show me like this
enter image description here
Looks like it's changing the icon to red as you expect? Then again, you haven't fully explained what your goal is here.
EDIT: try to target heart color by using color instead of background-color:
<div>
<a className="icons mr-3" onClick={()=> handleClickButton()} ><ion-icon name="heart-outline"
style= {{color:color}}></ion-icon></a>
</div>
I am trying to create a custom inline style for each div section mentioned in the code below. The primary reason is to scale the images down accordingly using css. I created a prop object and passed data through the array. However is there any way i can pass the style through the array of props?
I have tried to implement the styles using the array as the same way for the other props. However cant implement and dont really know how this works since I am quite new to the react prop system.
The div i am trying to map
<div className= "row text-center text-md-left">
{
teamData.members && teamData.members.map((item) => {
return (
<div className="col-xl-6 col-lg-12 mb-5 d-md-flex justify-content-between">
<div className="avatar mb-md-0 mb-4 mx-4 team" style = {{ width: "80%", height: "100%" }}>
<img src={require(`./img/${item.image}.jpg`)} className="rounded z-depth-1" style = {{ width: "100%", height: "100%" }} alt="avatar"/>
</div>
<div className="mx-4">
<h4 className="font-weight-bold mb-3">{item.name}</h4>
<h6 className="font-weight-bold grey-text mb-3">{item.role}</h6>
<p className="grey-text">{item.description}</p>
</div>
</div>
)
})
}
</div>
The prop i am trying to pass is in the component
let teamData = {
"members" : [
{
"name": "XYZ",
"role": "XYZ",
"description": "ZYX",
"image": 'ZYX',
}
]
}
Now is there any way i can pass the custom style for each prop using style as props in the teamData prop and map onto each component. Any kind of help towards the prop system is also appreciated if the solution cant be provided. Thanks!
my guess is you want to pass style props to your components.So just pass the style object from main component and use it in style statement of your children component.
for ex:if i wanna sent blue color style to a component i will do
<Signin styless={{'color':'blue'}} />
in the main app and in the children component
const styles=this.props.styless
<input style={styles} >
this will apply reqired style to your components.hope this helps.
I can make thumbs up icon with the code
<i class="thumbs up icon large"></i>
But how can I change the color from black to gray? I do it for a chrome extension and I add the CSS this way in the manifest.js:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": [ "tab/layouts/style.css", "app/lib/semantic.min.css" ],
"js": [ "common/owconstants.js", "common/OWprotocol.js", "3rdparty/jquery-1.10.2.min.js", "3rdparty/jquery.mCustomScrollbar.concat.min.js", "3rdparty/jquery-ui-1.10.3.custom.min.js", "common/common.js", "tab/sidebars.js", "tab/communication.js", "tab/syncobject.js", "tab/popup.js", "tab/authorization.js", "tab/userinfo.js", "tab/annotation.js", "tab/usercard.js", "tab/userlist.js", "tab/notifications.js", "tab/friendlist.js", "tab/injection.js", "tab/drops.js", "tab/chat.js", "tab/tracking.js", "tab/keywords.js", "tab/tabscript.js", "app/lib/semantic.min.js"]
}
],
You can also apply: <i class="red users icon"></i> .For more information about semantic-ui I recommend to visit this doc http://semantic-ui.com/elements/icon.html#/definition
You can apply:
color: gray; // or any suitable color code, e.g. #808080
to one of the existing classes thumbs up icon large if suitable, or add a new class of your own and apply styling to this instead:
HTML
<i class="thumbs up icon large own-class"></i>
Stylesheet
.own-class {
color: gray;
}
For White:
<i class="bars icon" style="color:#ffffff !important" id="rmenu"></i>e
<i class="large **black** inverted alarm icon"></i>
define color name if you are using semantic.