I have a Next.js-Tailwind project to which I want to add custom classes so that I can use them anywhere in the project.
I've tried a couple of things like this but doesn't seem to work.
tailwind.config.js:
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
height: {
'60': '60rem',
'40': '40rem',
'55': '55rem',
'180': '180px',
},
colors: {
'primary': '#0B003A',
},
},
},
variants: {
extend: {},
},
plugins: [require('#tailwindcss/typography')],
}
What all do I need to do to use these classes globally across the project?
Related
i have some color defined in my tailwind configuration like so:
module.exports = {
content: [
...
],
safelist: [
{
pattern: /(bg|border|text)-(alpine|dacia|renault|nissan|bmw|mini|opel|toyota|volkswagen|citroen|kia|peugeot|ds|lexus)(\/10)?/,
variants: ['hover', 'focus'],
},
],
theme: {
...
extend: {
...
colors: {
...
alpine: '#056EB6',
renault: '#efdf00',
dacia: '#646b52',
nissan: '#c3002f',
bmw: '#1c69d4',
mini: '#eb8802',
opel: '#f7ff14',
toyota: '#f02',
volkswagen: '#001e50',
citroen: '#9d0605',
kia: '#051520',
peugeot: '#00a3e0',
ds: '#ad0040',
lexus: '#333366',
},
...
},
},
variants: {
extend: {
display: ["group-hover"],
},
},
plugins: [
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#vueform/slider/tailwind'),
],
}
As you can see, I added these colors to my safeList, everything works fine except a particular combination:
The last part of my pattern '(/10)?' seems to ignore the hover: variant
bg-alpine -> works
bg-alpine/10 -> works
hover:bg-alpine -> works
hover:bg-alpine/10 doesnt
Maybe its an issue with Tailwind ? or I'm missing something ?
This is my tailwind.config.js:
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
Now I have a class input-validation-error which gets added dynamically at runtime, thus not being available in the files listed in the content section of the TailwindCSS config file.
How can I add this class to the JIT generated CSS file anyway as JIT is the default in TailwindCSS 3?
You can add the class(es) to a savelist.
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
safelist: [
'your-class',
'your-class',
],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
I Generate a new project with nx using nextjs preset. Then with the help of the nx dev blog post i setup tailwind css like following
postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: { config: './apps/storefront/tailwind.config.js' },
// tailwindcss: {
// config: join(__dirname, 'tailwind.config.js'),
// },
autoprefixer: {},
},
}
tailwind.config.js
const { createGlobPatternsForDependencies } = require('#nrwl/react/tailwind');
module.exports = {
purge: createGlobPatternsForDependencies(__dirname),
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
next.config.js
// eslint-disable-next-line #typescript-eslint/no-var-requires
const withNx = require('#nrwl/next/plugins/with-nx');
/**
* #type {import('#nrwl/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
};
module.exports = withNx(nextConfig);
But now if I run the apps, tailwind CSS does not seem to be laded in the app. So what am I doing wrong, and how can fix the issue?
In tailwind.config.js, you should change "purge" into "content" which recommends by the new release version of tailwindcss and also the path should config by starting from the root path. For example: content: ['./apps/blogs/pages/**/*.{js,ts,jsx,tsx}']
YR007 answer should be marked as the correct one, both postcss.config.js and tailwind.config.js should have root references if they are inside a monorepo app, for example:
postcss.config.js
module.exports = {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: { config: './apps/backoffice/tailwind.config.js' },
autoprefixer: {},
},
};
tailwind.config.js
module.exports = {
content: [
'./apps/backoffice/index.html',
'./apps/backoffice/src/**/*.{vue,js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
};
**In Nx + Nextjs with tailwind some libs components are missing tailwindcss classes you can configure them like that in tailwind.config.js in Nextjs project **
you can point directly to libary
module.exports = {
content: [
join(__dirname, '**/*.{js,ts,jsx,tsx}'),
join('libs/ui/src/lib/**/*.{js,ts,jsx,tsx}'),
...createGlobPatternsForDependencies(__dirname),
],
}
There is a simple way for it's setup. Make a tailwind.config.js file at root and add this code
module.exports = {
mode: "jit",
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Create a postcss.config.js file and make this
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Then in your globals.css , simply import tailwind
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
and include this globals.css file in your app.js
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'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.