I don't know why all the style sections of my project having a gray text. Anything work normally but this make it hard to watch.
image.
My nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
typescript: {
shim: false,
},
modules: [
[
"#pinia/nuxt",
{
autoImports: ["defineStore"],
},
],
],
css: [
"~/assets/css/tailwind.css",
"#fortawesome/fontawesome-svg-core/styles.css",
],
build: {
postcss: {
postcssOptions: require("./postcss.config"),
},
},
});
My postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
},
};
content of my tailwind.config
content: [
"./assets/**/*.{vue,js,css}",
"./components/**/*.{vue,js}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.{vue,ts,js}",
],
Have anyone encountered this problem before? please help me.
Nevermind, I installed extension language-postcss and its good
Related
This is my tailwind.config.js:
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
Now I have a class input-validation-error which gets added dynamically at runtime, thus not being available in the files listed in the content section of the TailwindCSS config file.
How can I add this class to the JIT generated CSS file anyway as JIT is the default in TailwindCSS 3?
You can add the class(es) to a savelist.
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
safelist: [
'your-class',
'your-class',
],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
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
Using React-bootstrap in our NextJS (10.0.0) app and need to remove unused CSS so using purgecss for that. But all the CSS are getting removed after doing like in this https://purgecss.com/guides/next.html. And found that issue is because of CSS Modules that we are using.
Here is my postcss.config.js
module.exports = {
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
[
'#fullhuman/postcss-purgecss',
{
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}'
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", "body"]
}
],
]
}
Any ways to remove unused CSS?
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 :)
I am trying to use CSS Modules for CSS styling of my ReactJs project, for this I applied ant design documentation (see here: https://pro.ant.design/docs/style), however unfortunately it doesn't work.
The problem is that I want to override the component style of ant Button and it does not get the style.
Below there is a short sample of my code:
CSS class: in MyContainer.less file:
.antButton{
:global {
.ant-btn-primary {
background-color: rgb(215, 226, 233);
border-color: #848586;
font-size: 7pt;
color: red !important;
}
}
}
code:
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.less';
import styles from './MyContainer.less';
const MyContainer= () => {
return (
<Button type="primary" size="small" className={styles.antButton} >Download</Button>
);
};
export default MyContainer;
I'm using Ant design (Version 4.3.0) in react (Version 16.13.1 ) with Webpack (Version 4.42.0).I also installed less-loader (Version 7.3.0) and babel-plugin-import (Version 1.13.3).
I don't know if there is any specific config of the Webpack that I am missing or the problem is somewhere else?
Finally I could handle my problem with antd, when you use css modules you have to add extra config for antd styles to work, I've found my solution in this web site:
https://www.programmersought.com/article/3690902311/ As described there if you add these configs in these order in your Webpack.config in Rule section it will work with Css modules and overriding less styles of antd components.
{
test: /\.less$/,
include: [/src/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: { lessOptions:{javascriptEnabled: true }}
},
],
},
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// change
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// change
// modules: true, // new support for css modules
// localIndetName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
Also you need to add babel import in your package.json:
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}
]
]
},
and you have to set style to the wrapper div of antd Components in this way:
import React from 'react';
import { Button } from 'antd';
//import 'antd/dist/antd.less'; you don't need this line when add babel.
import styles from './MyContainer.less';
const MyContainer= () => {
return (
<div className={styles.antButton}>
<Button type="primary" size="small" >Download</Button>
</div >
);
};
export default MyContainer;
I wish it help