Please help. I am trying to use custom colors in Tailwind and have already installed... configured and gotten Tailwind to work in my project. I then added the custom colors into Tailwind and ran 'npm run build:css' from my package.json file and it runs successfully but I cannot get the colors to work. I have tried putting quotes around the colors and not the values and it still doesn't work. Here is my code.
module.exports = {
theme: {
extend: {
colors: {
limegreen: {
'50': '#FBFCF7',
'100': '#F8FBE1',
'200': '#EEF69E',
'300': '#DCEC53',
'400': '#A8D619',
'500': '#65DC21',
'600': '#429E04',
'700': '#357C06',
'800': '#295B09',
'900': '#20450A',
},
}
}
}
}
Your approach is correct. I tried the same in my code and it worked fine.
I would suggest using 'npm start' and refreshing the page after saving this code. The tailwind configuration file takes a little more time to show changes.
Besides, I would suggest writing the numbers without quotes.
Your syntax seems to be correct, you can also write it like this:
colors: {
secondary: "#FF0000",
silver: "#F3F3F3",
gray: {
dark: "#1f2d3d",
darkest: "#3c4858",
DEFAULT: "#777",
light: "#e0e6ed",
lightest: "#f9fafc",
naive: "#333333",
naiveHover: "#7F7F7F",
},
},
Make sure that the className is correct:
<div className="bg-limegreen-50"></div>
orr
<div className="text-limegreen-50"></div>
Related
DaisyUI has default themes and you can change them with the data-theme attribute e.g. <html data-theme="cupcake">. It seems as though the default is the light theme.
The problem is that I want to be able to use the #apply directive with DaisyUI so that I can have BEM class names in the template and DaisyUI utility classes in the style block. It seems that I can't set a default that will be picked up at compile time.
In my tailwind.config I've tried using the light theme to see if I could overwrite it, e.g.:
plugins: [require('daisyui')],
daisyui: {
themes: [
{
light: {
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
base100: '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
But this doesn't work. I've tried looking into the library itself for clues into how I could overwrite the default theme at compile time but I can't see how.
Although some people consider BEM with Tailwind an anti-pattern, I had long held this view myself as well, I have since changed my mind and feel that the extra effort does help disambiguate your template with the added benefit of allowing bespoke CSS whenever you need to drop into it so please don't suggest just using the inline utility classes as I know this works.
I'm not sure what is your issue exactly.
But once you changed tailwind config, then it should work.
If you want to change your default theme with another one, it requires some code.
But now you changed your light theme, so it will directly work.
Please check your content property again. I'm working on Next JS.
And I think base100 property should be base-100.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
"base-100": '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
...
Is it possible to make the color dynamic in tailwind config.
I want to received the desired color for (primary , accent) from backend via api.
So the user can change the color from the admin panel.
i want to get this hex value from api
Yes this is possible but instead of only primary, you need to return the complete string like bg-primary(as tailwind only recognises the string) where your primary color should be defined in tailwind.config.js file.
For an example you can refer to my answer for this question.
You can try fetching the CSS variables to change you color palette without changing tailwind.config.js
config file:
module.exports = {
theme: {
extend: {
colors: {
"primary": {
100:"var(--primary-color-100)",
200:"var(--primary-color-200)",
},
"accent": "var(--accent-color)"
},
},
},
};
css file:
:root {
--primary-color-100: #fff;
--primary-color-200: #fff00;
--accent-color: #000;
}
I have updated Tailwind V2 to Tailwind V3 in my Sage 9 project by following Tailwind's upgrade guide. When I add a class to my blade file, the new engine doesn't generate the required classes in the css. The only way I seem to get it to generate the classes is by updating (saving a change) my tailwind.config.js. This happens when I use either the yarn build or yarn start commands.
Using bg-blue text-primary as an example; the text colour works, but the background doesn't. Then if I add some slash comments to my tailwind.config.js file, save it and run yarn build then, behold a blue background with red text.
I had to downgrade autoprefixer to v 9.0.0 because of this error: Module build failed: Error: PostCSS plugin autoprefixer requires PostCSS 8. so I don't know whether or not this affects it's ability to generate the classes.
dependencies:
"autoprefixer": "^9.0.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.7",
Tailwind.config.js:
module.exports = {
content: [
'./resources/views/**/*.blade.php'
],
theme: {
colors: {
primary: {
DEFAULT: 'red',
},
secondary: {
DEFAULT: '',
},
white: '#fff',
black: '#000',
blue: 'blue',
gray: {
DEFAULT: '',
},
transparent: 'transparent',
},
extend: {
screens: {
'sm' : '567px',
'md' : '768px',
'lg' : '1025px',
'xl' : '1200px',
'2xl' : '1366px',
'3xl': '1660px',
'4xl': '1920px'
},
zIndex: {
'-10': '-10',
}
},
},
plugins: [
globalStyles,
],
}
i think the watch command on npx will help you generate the new css details, see if this post can help you npx --watch required to compile
In an attempt to update PHP version, I came up with some funky node issues oddly enough instead. I'm having some weird Tailwind 3.0 compiling issues where not all the color shades are appearing. The defaultTheme colors are not compiling right. I have colors in the tailwind-config.js but not all shades are appearing like the 700 for blue. I noticed if I put the colors I want in the array (view gray in the example attached), it works. Do I have to add every color shade? This suddenly just started happening. It was fine before the PHP update. I'm trying to use text-blue-700 and it can't find it.
Example of the setup: https://play.tailwindcss.com/HSzmza7os3?file=config
Has anyone else had this issue before where the defaultTheme won't pull in all the theme color shades?
You don't have to use defaultTheme if you're trying to add variations to the existing theme. Instead, you can put your color additions in the extend section of the config object. For example, to keep the default Tailwind classes like text-gray-500 and add your new ones:
module.exports = {
plugins: [],
theme: {
extend: {
colors: {
gray: {
lightest: '#F7F7F7',
lighter: '#f1f1f1',
light: '#e1e1e1',
default: '#57677A',
dark: '#C2CAD3',
darker: '#656565',
darkest: '#808080',
},
},
},
},
}
If you only want to use the default colors (no additions), you should not have to add anything to the config.
Working version of your example: https://play.tailwindcss.com/rKi0lRmivh
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"