My tailwind background gradient is not being applied
here is my html code:
<div>
<button className="bg-gradient-to-r from-primary-orange via-secondary-orange to-lighter-orange w-4/5 p-4 mt-10 rounded">Search Flights</button>
</div>
My tailwind.config.js:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
backgroundColor: theme => ({
...theme('colors'),
'primary-orange': '#FF8C00',
'secondary-orange':'#FFA500',
'lighter-orange':'#FFD700'
})
},
variants: {
extend: {},
},
plugins: [],
}
Running my react script with post-css so all the other colors I add to tailwind.config are working once I generate the post-css just not the gradient.
Any idea why?
Thanks
Use the extend section of your tailwind.config.js file if you'd like to extend the default color palette rather than override it. Then add gradientColorStops attribute to it where you can write your custom colors.
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {
gradientColorStops: theme => ({
'primary': '#FF8C00',
'secondary': '#FFA500',
'danger': '#FFD700',
}),
},
},
variants: {
extend: {},
},
plugins: [],
}
Related
I have a Next app and Text Editor using react-quill. In localhost everything works well, but when I got my project in vercel some features of react-quill don't work, like fontSize, color of font, align and so on.
`
import { Box } from '#chakra-ui/react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
const QuillNoSSRWrapper = dynamic(import('react-quill'), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
const modules = {
toolbar: [
[{ header: '1' }, { header: '2' }, 'code-block'],
[{ size: [] }],
[{ script: 'super' }, { script: 'sub' }],
[{ color: [] }, { background: [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[
'direction',
{ align: [] },
{ list: 'ordered' },
{ list: 'bullet' },
{ indent: '-1' },
{ indent: '+1' },
],
['link', 'image', 'video'],
['clean'],
],
};
const formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'indent',
'link',
'image',
'video',
'code-block',
'align',
'direction',
'color',
'background',
'script',
'super',
'sub',
];
const TextEditor = ({ setContentValue, value }: any) => {
return (
<QuillNoSSRWrapper
bounds={'.app'}
modules={modules}
formats={formats}
onChange={setContentValue}
placeholder="Write your post here. You can edit your text by tools above"
value={value}
theme="snow"
/>
);
};
export default TextEditor;
`
Here my code of TextEditor
Do you have any ideas about this?
I tried to use Text Editor react-quill that works well in development, but it doesn't work in vercel
Check if your next.config.ts has swcMinify: true. Removing this in my project helped.
More info here: ReactJs quill editor add color to text not working for deployed app
I am using react, nx, tailwind to create a monorepo with multiple config
What I would like to achieve is
one config for the whole repo
one config per project
one plugin that extend the project config on each lib.
I currently have this :
root::tailwind.config (base styles)
module.exports = {
content: [],
theme: {
extend: {
colors: {
'27313B': '#27313B',
},
},
},
plugins: [],
};
project::tailwdind.config (extends the root and call for a plugin)
const { createGlobPatternsForDependencies } = require('#nrwl/react/tailwind');
const { join } = require('path');
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
...createGlobPatternsForDependencies(__dirname),
],
presets: [require(join(__dirname, '../../tailwind.config'))],
theme: {
extend: {},
},
plugins: [require(join(__dirname, '../../libs//tailwind.plugin'))],
};
lib::tailwind.plugin
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(
function ({ matchUtilities, theme }) {
matchUtilities(
{
colors: (value) => ({
colors: value,
}),
},
{ values: theme('colors') }
);
},
{
theme: {
extend: {
colors: {
F00: '#f00',
},
},
},
}
),
],
};
Sadly, the plugin never work,
doing
<div className={'text-27313B'}>asdasd</div>
show the good color but
<div className={'text-F00'}>asdasd</div>
dont
I am configuring it wrong ?
you try this
module.exports = {
content: [],
theme: {
extend: {
colors: {
27313B: '#27313B',
},
},
},
plugins: [],
};
ok I copy pasted wrong...
module.exports = plugin(
function ({ matchUtilities, theme }) {
matchUtilities(
{
colors: (value) => ({
colors: value,
}),
},
{ values: theme('colors') }
);
},
{
theme: {
extend: {
colors: {
F00: '#f00',
},
},
},
}
);
works.
I was exporting a plugin : plugin() instead of just plugin()
I implemented monaco editor in my react application, but It's just showing one color, I am unable to figure it out.
I have also tried using the by default theme as well, without custom theme, still Its the same problem
monaco.editor.defineTheme('customTheme', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'green', background: '#457EFF', foreground: '#457EFF' },
{
token: 'red',
background: '#457EFF',
foreground: '#457EFF',
},
{ token: 'green', background: '#900000', foreground: '900000' },
],
colors: {
'editor.background': '#0C0F17',
},
});
if (monacoEl.current) {
setEditor(
monaco.editor.create(monacoEl.current!, {
readOnly: false,
value: ["function DestinationCard() {\n\talert('Hello DestinationCard!');\n}"].join('\n'),
// automaticLayout: true,
language: 'typescript',
// theme: 'vs-dark',
theme: 'customTheme',
minimap: {
enabled: false,
},
}),
);
}
<div className={style.codeView} ref={monacoEl as RefObject<HTMLDivElement>} />
I am facing an issue with adding the complete color palette. I want to access all the colors mentioned in the documentation.
I made changes in the tailwind.config.js file. When using, nothing happens on the render.
Please let me know what can I do to fix it.
tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
// Build your palette here
transparent: "transparent",
current: "currentColor",
gray: colors.trueGray,
red: colors.red,
blue: colors.sky,
yellow: colors.amber,
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Usage:
import React from "react";
export default function Contact() {
return (
<div className="">
<h1 className="text-colors-blue">This is the Contact page</h1>
</div>
);
}
I know I can turn off all ripples by putting this in the theme object:
components: {
MuiButtonBase: {
defaultProps: {
disableRipple: true,
},
},
},
I know I can turn it off for everything except all IconButtons with the following:
components: {
MuiButtonBase: {
defaultProps: {
disableRipple: true,
},
},
MuiIconButton: {
defaultProps: {
disableRipple: false,
},
},
},
I know I can turn it off each component individually with this JSX:
<Button disableRipple>
Only one rippleless!
</Button>
But is there any way to turn the ripple off globally and just enable it individually?
For example, something that would do what the following fake code suggests:
<Button enableRipple>
Only one rippled!
</Button>
🤔
Okay its this easy:
<Button disableRipple={false}>
Only one rippled!
</Button>