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 :)
Related
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 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?
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.
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