im using tailwind in my Nextjs project. i decided to add my own color set to tailwind.config.js. then when i go back to my project i saw some tailwind classes for some elements not working and some of them works like before. the codes that should be in global css are there. #tailwind base; #tailwind components; #tailwind utilities;
and global css imported in layout. it was working fine whole the time. i changed nothing but just i said earlier. maybe its worth to know that im using experimental feature (appDir) in next.config.js.
its now my tailwind.config.js file:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
portcss file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
also has the tailwind in package.json: "tailwindcss": "^3.2.4"
i removed the color set but didnt fixed the problem. i tried npm run dev -- --no-cache
but didnt helped. deleting .next also not worked. even moved the folder but the problem exist. then i deleted all tailwind config files and reinstall them and not everything just messed up. there is no more tailwind classes working now.
Have You tried adding and
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./app/**/*.{js,ts,jsx,tsx}"
]
Related
I installed tailwindcss via scoop and created a new project.
Then i ran via CLI tailwindcss init and edited tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.{html}",
],
theme: {
extend: {},
},
plugins: [],
}
I created input.css:
#tailwind base;
#tailwind components;
#tailwind utilites;
Then created output.css and started the next command:
tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
Every time i edit html.css tailwind css start rebuilding but doens't create the classes i wrote in html file.
How con i solve this?
Thank you
I tried to see some answers here on stackoverflow and but i didn't find any solution to my problem.
I got a problem using tailwind css with Vue3. Looking at the network tab it's size is 4.4 MB.
The postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
cssnano: {}
}
}
tailwind.config.js
module.exports = {
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
prefix: 'tw-',
...
cssnano is added using yarn.
yarn.lock
cssnano-preset-default#^5.2.12:
cssnano#5.1.13
tailwindcss#^2.1.4:
Importing tailwind in main.css which itself is imported in the vue entrypoints.
#tailwind utilities;
#tailwind base;
#tailwind components;
Whether in development nor in production the size of main.css changes.
All right, I solved it. The version of tailwind I'm using ain't compatible with the "content" setting in the current documentation. I still have to use this syntax:
purge: {
enabled: true,
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
},
Also needed to do a re-build of the prod environment.
You have also the mode JIT it will generates your styles on-demande https://v2.tailwindcss.com/docs/just-in-time-mode
Need to use tailwind in a next.js project, but only in one page
How to import the Tailwind directives
#tailwind base; #tailwind components; #tailwind utilities;,
without affecting all other pages?
You can follow the same steps as mentioned here.
However in Step 3 , just give the path of your only file where you want Tailwindcss.
module.exports = {
content: [
"./pages/<path_of_your_file>",
],
theme: {
extend: {},
},
plugins: [],
}
So I started using Tailwind 2.0 in my React project and most things seem to work fine. Colors, sizing, flexbox, grid, etc. No problem with these utilities so far. But for some reason some font-size classes won't work properly. For instance, if I use text-lg, the style is applied
as you can see here.
But if I try anything bigger than that, like text-2x1 or higher, the class isn't applied.
I searched around a lot but didn't find anything that could help me.
I don't know it this helps, but that's my config file (even though it was already happening even before I made any change to it):
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
normal: "#A8A878",
poison: "#A040A0",
psychic: "#F85888",
grass: "#78C850",
ground: "#E0C068",
ice: "#98D8D8",
fire: "#F08030",
rock: "#B8A038",
dragon: "#7038F8",
water: "#6890F0",
bug: "#A8B820",
dark: "#705848",
fighting: "#C03028",
ghost: "#705898",
steel: "#B8B8D0",
flying: "#A890F0",
electric: "#F8D030",
fairy: "#EE99AC",
noType: "lightgray",
},
},
},
variants: {
extend: {},
},
plugins: [],
};
index.css has nothing but the bare minimum for Tailwind to work:
#tailwind base;
#tailwind components;
#tailwind utilities;
Here's the repository: https://github.com/TheSirion/pokedex
Looks like you are using the wrong className, text-2x1 className is wrong instead you should use text-2xl.
For your reference, check the official Doc to see more classNames for font-size.
I am trying to add Tailwind.css to a Vue.js project. There are a lot of resources on how to do this, most of them following the same path as this video. To make sure I was in the same conditions as in the video, I created a Vue app from scratch, using vue-cli with the default presets. After this step, I did the following :
npm install tailwind.css
create src/styles/tailwind.css
adding the following to the css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
call npx tailwind init to create a tailwind.config.js file at the root of the project
create postcss.config.js at the root of the project, and add the following to this file:
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
add a custom color to the tailwind.config.js file :
module.exports = {
theme: {
colors: {
"awesome-color": "#56b890",
},
extend: {},
},
variants: {},
plugins: [],
};
adding a simple <p> element to the HelloWorld.vue component generated by vue-cli
trying to style it using Tailwind classes
Finally, here is the problem: I can apply some classes like bg-awesome-color or text-xl and have them render properly, but a lot other classes won't work.
For instance, removing those classes and trying instead bg-black, bg-orange-500, or text-orange-500 has strictly no effect. Did I do something wrong? Would that be a problem of compatibility between Vue.js and Tailwind.css?
I do not know if this is related, but I also noticed that after adding Tailwind.css, the Vue logo that used to be centered in the original vue-cli template was now aligned left in the page.
Thank you very much for any help!
If You want to keep original content, then you should put this inside "extend".
module.exports = {
theme: {
extend: {
colors: {
"awesome-color": "#56b890",
},
}
},
variants: {},
plugins: [],
};
Read more at: https://tailwindcss.com/docs/configuration/
I got the answer from a maintainer of Tailwind.css after posting an issue. I actually misplaced the colors object in tailwind.config.js, causing it to override all existing colors with mine, thus actually removing all the existing ones. Here is the correct way to add / override a color without removing all the original ones :
module.exports = {
theme: {
extend: {
colors: {
"awesome-color": "#56b890",
},
},
},
variants: {},
plugins: [],
};
The same thing happened to me, and I spent hours trying to understand why my custom styles weren't working, your error may be in the postcss.config.js, make sure when importing tailwind.config.js you are calling correctly, I leave a couple of examples:
// postcss.confing.js
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"), // name your custom tailwind
...
],
};
// postcss.confing.js
module.exports = {
"plugins": [
require('tailwindcss')('tailwind.config.js'), // name your custom tailwind
require('autoprefixer')(),
]
}
In both cases it solved the problem for me, I hope it will help you.
You have to install tailwindcss with vue-tailwind.
Run npm install tailwindcss.
For more information, you can go here https://tailwindcss.com/docs/guides/vite