Using custom colors
I've successfully built tailwind with vite, created a new tailwind.config file to override the default colors and everything seems to work. The issue I'm having is that, if in the tailwind.config i add new colors beside the primary, success ecc. let's say Violet, this color is not rendered from filament. How do i
solve this?
17 Replies
the class needs to be in a file somewhere otherwise it will not be compiled
where are you trying to use the color
I created a filament.css file as required from the doc. Should i create a custom class to assign the color?
have you used tailwind before?
Yes, in another project and it was enough using the tailwind classes to assign a color...
so you know that if the tailwind class is not in the code, its not compiled by tailwind
Yes of course but even if I use it in the code it does not render the color. Here's the issue
show me the code
What should i show you? Here's the tailwind config :
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./vendor/filament/**/*.blade.php",
],
darkMode: "class", // original false or 'media' or 'class'
theme: {
extend: {
colors: {
danger: colors.rose, // rose
primary: colors.cyan, //original blue
success: colors.green, // green
warning: colors.yellow, //yellow
violet: colors.violet,
blue:colors.blue,
},
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
],
};show me where youre using the custom color
BadgeColumn::make('priority')->label('Priorità')->color(static function ($state): string {
if ($state == "low") {
return 'success';
}elseif($state == "normal"){
return 'blue';
}elseif($state == "high"){
return 'warning';
}elseif($state == "critical"){
return "danger";
}
})->enum([
"low" => "Bassa",
"normal"=>"Normale",
"high"=> "Alta",
"critical"=> "Critica",
]),
TextColumn::make('created_at')->date(),
BadgeColumn::make('status')->label('Status')->color(static function ($state): string {
if ($state == "open") {
return 'blue';
}elseif($state == "pending"){
return 'warning';
}elseif($state == "resolved"){
return 'blue';
}elseif($state == "closed"){
return 'success';
}
})->enum([
"open" => "Aperto",
"pending"=>"In attesa",
"resolved"=> "Risolto",
"closed"=>"Chiuso",
]),
]),
ViewColumn::make('request')->view('tables.columns.ticketing.ticket-details'),
];This is the result
first, you are using the color class in files not int the config
contentWhat do you mean sorry?
next, you should be using the color with shade, example
bg-primary-500This one is my tailwind config.js, here i should use the shades?
and also, lastly, the passing the right color class will be rendered
please read Tailwind's doc to understand how the basics works https://tailwindcss.com/docs/content-configuration
violet and colors.violet are basically the same thing
BadgeColumn's view not necessary is passing your custom color "blue" to render@gianmarcovarrone , in addition, you can create a custom badge column
Ex