I'm trying to use nested declarations in Tailwind, so, in their docs they show postcss.config.js using require() from CommonJS:
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
I need the same behavior, but in another format, not using the require() format, example:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
You need to install postcss-import via npm/yarn and then change your postcss.config.js to:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
Also: When you use tailwindcss to transpile your CSS make sure you have the --postcss flag enabled.
Related
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 nextjs with tailwindcss and i am facing the difficulty in adding postcss-nesting to my nextjs app.
Here is the configuration below for the same :
next.config.js
const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});
postcss.config.js
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
"tailwindcss/nesting",
"postcss-nested",
],
};
tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
};
In my custom css file i am trying to use it like
.toolbar_navigation_items {
li {
#apply text-3xl;
}
}
then i am getting the error
"(2:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
NOTE : I also tried changing my postcss.config.js to
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
as mentioned in the docs but it says
A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
I had same issue
install postcss-nesting: npm install -D postcss-nesting
postcss.config.js:
module.exports = {
plugins: {
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
},
};
https://tailwindcss.com/docs/using-with-preprocessors#nesting
Had same error. When used:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Got this link: https://nextjs.org/docs/messages/postcss-shape
It shows how new config should be written (remove the require('package') function wrapping the strings). New postcss.config.js:
module.exports = {
plugins: [
'postcss-import',
'tailwindcss/nesting',
'tailwindcss',
'autoprefixer',
]
}
This fixed the nesting config issue for me.
Quote:
npm i sharp
# or
yarn add sharp
https://nextjs.org/docs/messages/install-sharp
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
Before the changes, everything was going to build and everything worked.
my next.config.js //
// const withCss = require('#zeit/next-css');
// const withSass = require('#zeit/next-sass');
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
const nextConfig = {
...
};
module.exports = withPlugins([
// [ withSass, {} ],
// [ withCss, {} ],
[ withPurgeCss, {
...
}
], nextConfig);
Further, as recommended, I decided to abandon the use of the deprecated # zeit / next-css and # zeit / next-sass
I added the tailwind.config.js file as written on their website:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
And made changes to post.config.js and also installed the missing packages:
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
'postcss-preset-env': { stage: 2 },
},
};
In _app.js, I include the main.scss file:
#import "tailwindcss/preflight";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
.self-class {
#apply .bg-olive .shadow-olive .text-base .text-white .font-bold;
}
I get an error: Error: Syntax error: /home/roma/project/main.scss #applycannot be used with.bg-olivebecause.bg-oliveeither cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that.bg-oliveexists, make sure that any#importstatements are being properly processed *before* Tailwind CSS sees your CSS, as#apply can only be used for classes in the same CSS tree.
Do I have my tailwind.config.js file configured incorrectly or is the file built incorrectly in general? So where I am trying to refer to tailwind styles is not known about them yet?
Thanks for any help!
I am currently trying to use CSS Modules class and PostCSS's nesting abilities together in the same file with TailwindCSS. But when doing something like this in my Sidebar.module.css:
.sidebar {
#apply fixed top-0 left-0 h-full w-64;
&.closed {
#apply w-20;
}
}
Chrome's does not seem to be picked up and this warning appears in the inspector:
Warning saying Unknown property name
So I am not sure if this is possible in the first place. Here is my postcss.config.js
module.exports = {
plugins: [
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
This guide and using the following postcss.config.js setup worked for me.
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
'postcss-nesting': {},
tailwindcss: {},
'postcss-flexbugs-fixes': {},
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': true
}
}
}
}
If you want to use module style CSS import, then follow this doc
and please check your app settings as that.
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}