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.
Related
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}"
]
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: [],
}
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
How to make Tailwind css work in a nrwl/nx Next js project?
Now I am using the common approach but it failed:
[ error ] ./styles/main.css
Error: Didn't get a result from child compiler
the common approach I took:
npx create-nx-workspace#latest my-org
yarn add --dev #nrwl/next
nx g #nrwl/next:application my-project
yarn add tailwindcss autoprefixer postcss-loader #zeit/next-css
cd apps/my-project
create
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
};
create
next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({});
create
styles/main.css
#tailwind base;
#tailwind components;
#tailwind utilities;
create a default _app.js in pages
add import '../styles/main.css' in _app.js
I have solved the problem.
Here is how I added tailwind in next.js project
install tailwind and autoprefixer in the workspace
create tailwind.config.js and tailwind.css.
import tailwind.css at _app.tsx
create next.config.js
const path = require('path');
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss')(
path.resolve(__dirname, 'tailwind.config.js') // the absolute path of your tailwind.config.js
),
require('autoprefixer')
]
}
}
],
// the absolute path of the folder contains tailwind.css
// I reuse tailwind.css across projects and libs so I put it in the workspace root
// Maybe I should create a lib for it.
include: path.resolve('./global')
});
return config;
}
};
It is similar if you wanna integrate Tailwind with lib's storybook or in projects of other framework. Just find the way to push rules to webpack config.
Hope it helps.
If you use new version - 9.2 then you need this article:
https://nextjs.org/blog/next-9-2
And updated setup example for Next.js 9.2:
https://github.com/tailwindcss/setup-examples/pull/50
I tried it, it good works for me.