How to write nested CSS with TailWind in Nuxt? - css

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

Related

CSS class not being applied even when exported react-toolbox

I am using react-toolbox and react-css-themr to supply theme. I create my contextTheme and supply it through ThemeProvider. Everything's seems fine. I am using webpack, the styles are exported and loaded in the attribute of my page, so there is no problem with the importing the css.
EDIT: I can clearly see the context theme is loaded to the website, as I can observe RT objects
my contextTheme file looks like this and is named contextTheme.js
export default {
RTAutocomplete: require('./assets/style/themes/autocomplete.module.css'),
RTButton: require('./assets/style/themes/button.module.css')
};
I can see custom theme in tag like this
.autocomplete-module--autocomplete--tESXbPMw {
padding: 0
}
.autocomplete-module--autocomplete--tESXbPMw .autocomplete-module--suggestions--t6ziL7OQ {
background-color: red;
border-color: blue;
border-radius: 0
}
theme provider looks like this
<ThemeProvider theme={contextTheme}>
<Router store={s} history={h}>
{ routes }
</Router>
</ThemeProvider>
resulting html element still has only default style applied, because no style is attached to it.
In case my webpack css config looks like this. I am not sure if that is relevant, but just in case.
{
test: /\.scss|\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
exportGlobals: true,
mode: "local",
auto: undefined,
localIdentName: "[name]--[local]--[hash:base64:8]",
},
sourceMap: shouldUseSourceMap,
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
sideEffects: true,
},

Tailwind css not getting included in project

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 use Tailwind Nested Declarations with postcss.config.js without require()

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.

After webpack(Nextjs 10 project) changes tailwind errors

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!

Is it possible to use nesting with css modules right now?

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'),
]
}

Resources