It's my tailwind configuration file here I tried to add a new colour variable. But it's not working!!!
But in the VsCode Tailwind CSS IntelliSense plugin suggest the colour.
tailwind.config.cjs
module.exports = {
mode: 'jit',
purge: ["./src/**/*.svelte"],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
'test-blue': {
100: '#d0e7fb',
DEFAULT: '#0063bd',
500: '#4299e1',
700: '#2b6cb0',
}
},
},
variants: {
extend: {},
},
plugins: [],
}
VsCode Snippet
In Web
note: After change the config file, I restart the hmr.
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 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 :)
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