Here is the docs link I tried: https://tailwindcss.com/docs/content-configuration#configuring-source-paths
This is my config file:
module.exports = {
content: ['./src/**/*.{js, jsx, ts, tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
I have also gone through this answer: Tailwind utility classes only working in css file and not inline
I tried editing the config file like this:
module.exports = {
content: [
'./src/**/*.{js, jsx, ts, tsx}',
'./public/index.html',
'./src/components/**/*.{html,js,jsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Related
I'm working on a React project with Vite and Styled components. For better class names, I use the plugin vite-plugin-babel-macros, which works. But it displays the file name inside the class, which I'd like to hide, so from:
<h1 class="Homepage__H1-sc-1el87d5-0 frwzme"></h1>
to:
<h1 class="H1-sc-1el87d5-0 frwzme"></h1>
With create-react-app I have a file babel-plugin-macros.config.js where I add this code:
const config = {
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
}
But this does not work. I tried to add this in my vite.config.ts, but same problem:
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
},
],
],
},
}),
macrosPlugin(),
],
})
Thanks for your help!
I've just upgraded tailwind in my react project to get rid of this warning:
warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
As I understand it the 'purge' property is now replaced with 'content'. I replaced the property name and for the most part everything worked the same. However in my old Tailwind config file I needed to safelist a bunch of colors in order to make them show up. Without the purge property to use I don't know where to put the safelist
module.exports = {
mode: 'jit',
purge: {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
options: {
safelist: [
'bg-[#ffffff]',
'bg-[#d9ffff]',
'bg-[#cc80ff]',
'bg-[#c2ff00]',
'bg-[#ffb5b5]',
'bg-[#909090]',
'bg-[#3050f8]',
'bg-[#ff0d0d]',
'bg-[#90e050]',
'bg-[#b3e3f5]',
'bg-[#ab5cf2]',
'bg-[#8aff00]',
'bg-[#bfa6a6]',
'bg-[#f0c8a0]'
],
},
},
theme: {
extend: {},
},
plugins: [],
};
The code that requires the safelist to run is interpolating the properties into the class name of an element:
<div className={`text-white ${props.bg}`}></div>
In V3, there is no mode or purge section, but you can still add a safelist.
Your tailwind.config.js should look more like this:
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
'bg-[#ffffff]',
'bg-[#d9ffff]',
],
theme: {
extend: {},
},
plugins: [],
}
See: https://tailwindcss.com/docs/content-configuration#safelisting-classes
(4:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
My postcss.config.js file:
plugins: [
"postcss-import",
"tailwindcss/nesting",
"tailwindcss",
"autoprefixer",
],
};
I tried to write it down like this:
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};
and like this:
plugins: [
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
],
};
Github repo with this project: https://github.com/frkam/test-app
When I try to use nesting, i get this:enter image description here
As Ed Lucas mentioned above CRA5 does not allow to override postcss.config
But at the moment you can use something like craco
An Example you can find in Felipe Zavan comment
This works for me. So I hope it will be helpful :)
My craco.config
module.exports = {
style: {
postcss: {
loaderOptions: (postcssLoaderOptions) => {
postcssLoaderOptions.postcssOptions.plugins = [
require('tailwindcss/nesting'),
require('tailwindcss'),
require('postcss-mixins'),
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 0,
},
],
]
return postcssLoaderOptions
},
},
},
}
I've built a static website for my next JS app that uses tailwind CSS for styling. I'm using statically as a CDN. The website in the development server(local host) works perfectly alright. However, in production, certain parts of styling seem to be broken (Header, Footer, and toggling between dark/light mode to be precise). Attaching screenshots for reference.
Local server:
Production:
When I inspect the corresponding elements in local and production env, there seems to be no difference in the HTML structure and class names, but when I hover over the broken elements (nav items in this case) in production, the corresponding elements are not being highlighted.
So far this is what I was able to find. Below are few config files:
next.config.js:
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
reactStrictMode: true,
images: {
// domains: ['raw.githubusercontent.com','ibb.co'],
domains: ['raw.githubusercontent.com'],
loader:'imgix',
path:''
},
assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}
tailwind.config.css :
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
How do I go about fixing this?
Thanks.
Ensure to add a complete list of paths you need your CSS applied to in the purge array of tailwind.config.css.
module.exports = {
// ▼ here you need to add all paths according to your needs
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
I have a project using ReactJS, Webpack, TailwindCSS, and when I run the build command, the CSS file built is TOO BIG:
Here is my postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss,
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
And here is my tailwind.config.js:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
greenLight: "#1db954",
greyDark: "#121212",
greyLight: "#282828",
greyLighter: "#282828",
backgroundLight: "rgba(40,40,40,0.4)",
},
fontFamily: {
custom: ["Circular Spotify Tx T Black"],
},
container: {
screens: {
mobile: "23rem",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And this is ```webpack.config.js
I have searched a lot, but can not figure it out! Thanks.