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
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.
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'm trying to run "npm run dev," but it gives me an error in the end.
I'm using Laravel Mix and Tailwind CSS.
Versions
laravel-mix: 6.0.22
tailwind-css: ^2.0.4
#tailwindcss/jit: ^0.1.18,
resources/css/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss("resources/css/app.css", "public/css", [
require('#tailwindcss/jit'),
])
tailwind.config.js
module.exports = {
purge: ['./resources/**/*.{js,vue,blade.php,css}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
}
},
variants: {
extend: {},
},
plugins: [
],
}
ERROR in ./resources/css/app.css Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read
property 'theme' of undefined
at _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
at /var/www/work/node_modules/#tailwindcss/jit/src/index.js:50:11
at LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/var/www/work/node_modules/postcss/lib/lazy-result.js:391:26)
at async Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87:14)
at processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19)
at /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5
at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7)
1 ERROR in child compilations (Use 'stats.children: true' resp.
'--stats-children' for more details) webpack compiled with 2 errors
To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file.
tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./resources/**/*.{js,vue,blade.php,css}'],
theme: {
extend: {}
},
variants: {
extend: {},
},
plugins: [],
}
But first, you will need to upgrade your Tailwind and related packages, so run the following.
npm install -D laravel-mix#latest tailwindcss#latest postcss#latest autoprefixer#latest
Also, you'll need to remove the JIT package from your Webpack config and require Tailwind. As of Tailwind CSS v2.1 #tailwindcss/jit has been merged with the core Tailwind CSS repository.
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss("resources/css/app.css", "public/css", [
require('tailwindcss'),
])
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.