In order to have the user be able to select their color scheme in my website, I added a few themes in my style.css file. For example, one is "theme-light"
.theme-light {
--color-bg-primary: theme('colors.white');
--color-bg-typing: theme('colors.white');
--color-bg-input: theme('colors.white');
--color-bg-redo: theme('colors.blue.500');
--color-bg-redo-hover: theme('colors.red.500');
--color-bg-nav: theme('colors.red.500');
--color-bg-nav-active: theme('colors.red.500');
--color-text-primary: theme('colors.gray.900');
--color-text-secondary: theme('colors.gray.600');
--color-text-current: theme('colors.gray.900');
--color-text-correct: theme('colors.green.400');
--color-text-wrong: theme('colors.red.400');
--color-text-stats: theme('colors.gray.600');
--color-placeholder-primary: theme('colors.gray.600');
}
And I edited my tailwind.config.js file like so:
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: [],
theme: {
backgroundColor: {
primary: 'var(--color-bg-primary)',
typing: 'var(--color-bg-typing)',
input: 'var(--color-bg-input)',
redo: 'var(--color-bg-redo)',
'redo-hover': 'var(--color-bg-redo-hover)',
nav: 'var(--color-bg-nav)',
'nav-active': 'var(--color-bg-nav-active)',
},
textColor: {
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
current: 'var(--color-text-current)',
correct: 'var(--color-text-correct)',
wrong: 'var(--color-text-wrong)',
stats: 'var(--color-text-stats)',
},
placeholderColor: {
primary: 'var(--color-placeholder-primary)',
},
},
variants: {},
plugins: [require('#tailwindcss/typography')],
};
My question is: now I am unable to set anything like I was before in the html (like "text-blue-400" or "text-opacity-50"). How can I get the default configurations working again?
oh lol. all i had to use extend: https://tailwindcss.com/docs/theme
Related
I am using TailwindCSS for the first time, and that in a Next.js project. I followed their docs on "how to use tailwind with Nextjs" and tried adding colors in the tailwind.config.js, but it ended up breaking all colors. Other styles work.
I watched a YouTube video on Tailwind, but the guy was using it on regular HTML/CSS project. He outputted the file in a public/styles.css by running tailwindcss build styles/globals.css -o public/styles.css but I am using styles/globals.css in Next.js by following the docs.
My tailwind.config.js file:
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
colors: {
//ADDED THIS
white: {
0: "#fff",
},
},
},
variants: {
extend: {},
},
plugins: [],
};
Using theme.colors to add new colors will fully overwrite the default Tailwind color palette.
Either you define all the colors that you want to use in theme.colors explicitly.
const colors = require('tailwindcss/colors')
module.exports = {
//...
theme: {
colors: {
black: colors.black,
// Define all desired colors
white: "#fff"
}
},
//...
};
Or, if you still want to have access to all the default colors and simply need to extend them, use theme.extend.colors instead.
module.exports = {
//...
theme: {
extend: {
colors: {
white: "#fff"
}
}
},
//...
};
I'm trying to import TypeKit fonts into my Tailwind config. I have included the .css file like so in my index: https://use.typekit.net/kcz3fka.css. Inside my tailwind.config.cjs file I have the definition:
module.exports = {
purge: ['index.html', 'src/**/*.tsx'],
mode: 'jit',
theme: {
extend: {
container: {
center: true,
},
fontFamily: {
display: ['"katarine-web"', ...theme.fontFamily.sans],
body: ['"katarine-web"', ...theme.fontFamily.sans],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
I've tried escaping the katarine name as well as with and without double quotes. Neither seem to work as expected. What should I be doing to ensure Katarine can be used?
try this,
module.exports = {
purge: ['index.html', 'src/**/*.tsx'], // include your purge target files
mode: 'jit',
theme: {
extend: {
container: {
'center': true,
},
fontFamily: { // if you want extend 'katrarine-web', then just add them instead other originals.
'display': ['katarine-web'],
'body': ['katarine-web'],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
also, check this Doc.
Happy coding :)
I try to include some font faces into a tailwind-preset I want to use across multiple projects.
In the documentation it is only described how to define font-faces within the base layer of a css file, see here: https://tailwindcss.com/docs/adding-base-styles#font-face-rules.
However to include it in a distributable preset the way to go (from my knowledge), is to include it in a plugin. However I do not get what is the problem.
My approach is the following:
const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
module.exports = {
prefix: '',
mode: 'jit',
purge: {
content: [
'./src/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['myfont', ...defaultTheme.fontFamily.sans]
},
}
},
variants: {
extend: {},
},
plugins: [ plugin(function ({ addBase}) {
const fonts = {
'#font-face': [
{
fontFamily: 'My Font',
fontStyle: 'normal',
fontWeight: 400,
src:
'url("./fonts/my-font.woff") format("woff");'
},
]
};
addBase(fonts);
})],
};
Your plugin looks correct, but the fontFamily defined in the #font-face rule should be the same as the fontFamily defined in the font-family CSS rule. Try changing myfont to My Font in your theme extension config.
See this Tailwind Play REPL for an example.
I'm trying to create a variant in Tailwind file configuration.
What I would like to have is something like hover:border-l-4 hover:border-green-400, so a class that enables a border on the left (or only on top / bottom / right).
So I create this inside tailwind.config.js:
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: ['./src/**/*.html', './src/**/*.{js,ts,jsx,tsx}'],
},
darkMode: false,
theme: {
extend: {
colors: {
...
},
},
borderLeft: (theme) => ({}),
...
},
variants: {
extend: {
borderLeft: ['hover', 'focus']
},
},
plugins: [],
}
It doesn't work. I get TypeError: variantsValue is not iterable.
I didn't find anything useful in the documentation page.
Checkout docs on tailwind.
variants: {
extend: {
borderWidth: ['hover'],
}
}
From here, hover:border-l-4 hover:border-green-400 will work.
Everytime I update .js code in my Ember App (components, tests, etc.) my app.css file is rebuilt, even though I'm not touching any CSS!
I am using PostCSS and TailwindCSS plugin. Every time I save a .js the entire TailwindCSS library is rebuilt and takes 1200-2000ms. This is really unnecessary and I would like to know how to avoid it. If I disable TailwindCSS the rebuild time of PostCSS drops to 191ms on every .js save.
There are a few solution ideas I'd like to explore:
Is it possible to configure Ember rebuild my CSS ONLY when I change
CSS?
Is it possible to configure PostCSS to rebuild only when CSS has
changed?
How can I configure TailwindCSS to use a static CSS file for the library, and then setup
PostCSS to build only my custom tailwind classes using the
tailwind plugin?
ember-cli-build.js
postcssOptions: {
compile: {
plugins: [
{
module: require("postcss-import"),
options: {
path: ["node_modules"]
}
},
require("tailwindcss")("./config/tailwind.config.js")
]
}
}
config/tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
"80": "20rem",
"screen-80": "80vh",
"screen-60": "60vh"
},
minWidth: {
"96": "24rem",
screen: "100vw"
},
maxWidth: {
"min-content": "min-content",
screen: "100vw"
},
screens: {
xxl: "1920px"
},
zIndex: {
"9999": 9999
},
colors: {
puke: {
100: "#fff5f7",
200: "#fed7e2",
300: "#fbb6ce",
400: "#f687b3",
500: "#ed64a6",
600: "#d53f8c",
700: "#b83280",
800: "#97266d",
900: "#702459"
}
},
backgroundColor: theme => theme("colors"),
textColor: theme => theme("colors"),
borderColor: theme => ({
...theme("colors"),
default: theme("colors.gray.300", "currentColor")
})
}
},
variants: {},
plugins: []
};