I have been working on a project with NextJS and Tailwind CSS.
I need to use the height class h-96 for a couple of components, but since it is not default-defined I decided to added it to my tailwind.config.js like this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
height: {
'96': '24rem',
},
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};
I was expecting to be able to use h-96 but it seems that the configuration in the tailwind.config.js file are not been applied to the project.
NOTE: I also tried to set the height like this:
height: {
96: '24rem',
},
since the linting auto-corrected it for me, but this didn't work either.
h-96 is already defined in the tailwind css classes. You can update the h-96 default value in the tailwind.config.js in the following way.
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
height: {
'96':'124rem'
}
// ...
},
},
plugins: [],
}
Also , if you are just using it for couple of components, you can also directly change the values in the components itself like h-[124rem].
More info here
Height 96 (h-96) is a default theme. Since you are attempting to override a default, you must add it directly under the theme tab because you are not 'extending' anything, but rather changing the default configuration.
Source: Here
Try this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
height: {
96: '24rem',
},
extend: {
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};
i have configure tailwind css and its working fine but when i give routes like api/user/forget/id/token then tailwind css not working on that route
my configuration
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
theme: {
extend: {},
},
plugins: [],
}
how to get working tailwind classes on that type of route
I am using tailwind post CSS in my HTML, but classes are not applying.
I have installed all packages have linked CSS too.
tailwindconfigjs file
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
Is there anything to change?
How to write nested CSS with TailWind in Nuxt?
Tailwind recommends to not use preprocessors like Sass or less and recommends it's better to use postcss-nested and import...
I tried and searched too much to use it I couldn't
I only added this config to add css nesting ability as I searched
build: {
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'postcss-nested': {},
},
},
splitChunks: {
layouts: true
}
},
And this is my tailwind config file codes
module.exports = {
mode: 'jit',
darkMode: true, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {},
},
purge: {
content: [
`components/**/*.{vue,js}`,
`layouts/**/*.vue`,
`pages/**/*.vue`,
`plugins/**/*.{js,ts}`,
`nuxt.config.{js,ts}`
]
},
plugins: [],
}
this is my package.json file I've installed these:
#nuxtjs/tailwindcss - postcss - postcss-import - postcss-nested
Now when I try to write nested CSS I get error
I want to be able to write nested in components and in seprate css files alongside tailwind!
In vue components style section I try to write like this:
<style lang="postcss" scoped>
.test {
color:blue;
.ok{
color:red;
}
}
</style>
But it doesn't work
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"
}
}
},
//...
};