I am currently trying to create a web application, using TailwindCSS for styles, PostCSS as the processor and parcel-bundler as a bundler, based off this boilerplate from GitHub.
For some reason, every time I run yarn build, everything compiles right except for the CSS. The *.css file in dist/ is completely unchanged from the source file, and it seems like the file is not being processed at all...
My package.json
{
"license": "MIT",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build --no-minify src/index.html"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^4.0.3",
"autoprefixer": "^9",
"parcel-bundler": "^1.12.5",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
},
"dependencies": {
"#tailwindcss/forms": "^0.3.4",
}
}
main.css (CSS source file, *.css file in dist/ looks exactly like this)
/* purgecss start ignore */
#tailwind base;
#tailwind components;
#tailwind utilities;
/* purgecss end ignore */
.btn-orange {
#apply bg-gray-200 w-28 p-2 text-sm rounded hover:bg-yellow-500 transition-colors shadow-lg font-bold;
}
label {
#apply font-bold;
}
I have no idea what I'm doing wrong... I have used #tailwind instead of #import as suggested by many posts online, but for some reason the file is still not being processed. I am not sure if it is something wrong with PostCSS, or Parcel.
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 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
Each time I add a new class to the index.html file, I need to rebuild the output.css file manually.
The package.json file:
{
"name": "tailwind-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tailwindcss --watch -i ./input.css -o ./output.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.1.7"
}
}
The tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
screens: {
'sm': '480px',
'md': '768px',
'lg': '1440px',
},
content: ['./index.html'],
theme: {
extend: {},
},
plugins: [],
}
I am supposed to run npm run build once, and each time I saved the html file, tailwind is supposed to add my new classes to output.css. But it doesn't. I checked the file after saving index.html and I couldn't find my new classes there. But the CLI shamelessly said it rebuilt it in 20ms. I needed to run npm run build each time to successfully build my css file. Also, I deleted my previous nodejs installation and reinstalled the current version, updated VS Code, updated Google Chrome, and now, I am considering moving back to Windows from Manjaro.
Edit: A useful observation.
After saving index.html, the CLI said this:
Rebuilding...
Done in 27ms.
But when I stopped the process and reran npm run build, it said:
Rebuilding...
Done in 198ms.
There is a relatively huge time delay when it actually works.
Edit 2:
It works when I save index.html multiple times rapidly.
I moved from Manjaro to Ubuntu, and it still doesn't work!
You need to add these to your input.css to make the --watch work properly.
#tailwind base;
#tailwind components;
#tailwind utilities;
Without these, TW won't know from where it should pull info for your CSS classes and write a processed version in output.css
Let's say you wrote <h1 class="underline">Hello world! </h1> in index.html.
Tw needs to look for information on how it can parse + process the underline class and what should be written in output.css regarding this class.
Try it and let me know if it works.
try changing
from
npx tailwindcss --watch -i ./input.css -o ./output.css
to
npx tailwindcss -i ./input.css -o ./output.css --watch
Assuming this is how you think Tailwind CLI works:
This is your input.css:
.aaa {
color: blue;
}
This is your index.html:
...
<div class="aaa">AAA</div>
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You expect your output.css to be magically built into this:
.aaa {
color: blue;
}
.font-bold {
font-weight: 700;
}
This is how Tailwind CLI actually works:
In your input.css you have to first specify which Tailwind layers you think you will use in your index.html. Let's add a layer called utilities which enables you to use Tailwind classes such as font-bold, underline, etc.
#tailwind utilities;
.aaa {
color: blue;
}
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class which belongs to the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You go to output.css et voila - the Tailwind class is there:
.font-bold {
font-weight: 700;
}
.aaa {
color: blue;
}
You add another Tailwind class from the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold underline">BBB</div>
et voila:
.font-bold {
font-weight: 700;
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.aaa {
color: blue;
}
I'm trying to use a custom class overflow:inherit as #apply overflow-inherit in tailwind next.js project but it's throwing error. However, I can #apply pre-built tailwind classes like #apply flex flex-col md:h-full h-screen; but not custom.
Full repo: https://github1s.com/GorvGoyl/Personal-Site-Gourav.io
tailwind.scss:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
#variants responsive {
.overflow-inherit {
overflow: inherit;
}
}
}
project.module.scss:
.css {
:global {
.wrapper-outer {
#apply overflow-inherit; //trying to apply custom utility
}
}
}
Error:
wait - compiling...
event - build page: /next/dist/pages/_error
error - ./layouts/css/project.module.scss:4:6
Syntax error: C:\Users\1gour\Personal-Site\project.module.scss The `overflow-inherit` class does not exist, but `overflow-hidden` does. If you're sure that `overflow-inherit` exists, make sure that any `#import` statements are being properly processed before Tailwind CSS sees your CSS, as `#apply` can only be used for classes in the same CSS tree.
2 | :global {
3 | .wrapper-outer {
> 4 | #apply overflow-inherit;
| ^
5 | }
6 | }
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
"next": "^10.0.7",
"tailwindcss": "^2.0.3",
"sass": "^1.32.8",
"postcss": "^8.2.6",
I had the same problem on my Laravel project.
I decided that postcss is not enough for me. So in the webpack.mix.js I deleted the following
mix.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
and replaced it with sass like this
mix.sass("resources/css/app.scss", "public/css").options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
], });
Now, I got a number of cool features including the one you want
I don't even need to use #layer
in my scss file I can combine #apply and #extend and it works
.btn-my-theme{
#apply rounded border py-2 px-3 shadow-md hover:shadow-lg;
}
.btn-my-primary{
#extend .btn-my-theme;
#apply text-blue-600 bg-blue-200 hover:bg-blue-100 border-blue-500;
}
.btn-my-secondary{
#extend .btn-my-theme;
#apply text-gray-600 bg-gray-200 hover:bg-gray-100 border-gray-500;
}
Set CSS validate in "Workspace/.vscode/settings.json"
"css.validate": false,
or "User/settings.json"
"css.validate": false,
like this link