I have created a website that works well on local hosts but in vercel deployment output.css is empty.
here is code of package json
{
"devDependencies": {
"tailwindcss": "^3.1.8"
},
"scripts":{
"build":"npx tailwindcss -i ./src/input.css -o ./dist/output.css "
},
"dependencies": {
"animate.css": "^4.1.1",
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0"
}
}
here is tailwing.config
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}","./public/*.html"],
theme: {
extend: {},
},
plugins: [],
}
please help
Related
I am using vite to build my assets and this works fine except for the background images.
Example:
<img src="/img/ruben.jpg" alt="Ruben">
Works and has as url: http://mylocalsite.nl.test/img/ruben.jpg which is good.
But this:
&:before{
content: "";
background-image: url('/img/svg/echtveilig-beeldmerk.svg');
}
Has as url: http://127.0.0.1:5173/img/svg/echtveilig-beeldmerk.svg which is the local server started by vite but I don't want that, I just want the same url as for image tags. How can I fix that?
I tried creating a file 'postcss.config.js' and adding:
module.exports = {
plugins: {
autoprefixer: {},
},
};
But this does not work.
My package json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.50.1",
"sass-loader": "^12.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"bootstrap": "^5.3.0-alpha1",
"autoprefixer": "^10.4.8",
"swiper": "^8.1.3"
}
}
try this instead
url("{{ asset('assets/img/svg/echtveilig-beeldmerk.svg') }}")
My tailwind.config.js file looks like
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./pages/**/*.tsx', './core/**/*.tsx', './components/**/*.tsx'],
theme: {
extend: {},
},
variant: {},
plugins: [],
};
post.css
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
If the w-4 utility-class is applied to a div
<div className="w-4">...</div>
I can find the definition in the global.css file. If I change to any other value (e.g. w-8), there is no effect - w-8 doesn't appear in global.css.
The application is a TS / Next.js application.
VC code shows me a tooltip:
.w-8 {
width: 2rem/* 32px */;
}
package.json
"next-fonts": "^1.5.1",
"postcss": "^8.4.18",
"prettier": "^2.3.0",
"tailwindcss": "^3.2.1",
"ts-jest": "^26.5.6",
"typescript": "^4.2.4"
Still have styled-components in the app - migrating to TWCss.
I have set up a project with snowpack for svelte in which I'm trying to use tailwind for styling, but using states like hover or focus results in vs code throwing the error
Semicolon or block is expected
If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`?
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.
One code example that is causing the problem is
<style lang="postcss">
button {
#apply py-2 px-6 rounded-lg shadow-md;
}
.hoverable {
#apply hover:opacity-90;
}
</style>
This is the package.json
{
"scripts": {
"start": "run-p routify snp",
"build": "routify -b && routify export && snowpack build",
"test": "web-test-runner \"src/**/*.test.ts\"",
"routify": "routify",
"snp": "snowpack dev"
},
"dependencies": {
"#snowpack/plugin-run-script": "^2.3.0",
"postcss-import": "^14.0.2",
"svelte": "^3.37.0"
},
"devDependencies": {
"#roxi/routify": "^2.18.3",
"#snowpack/plugin-dotenv": "^2.2.0",
"#snowpack/plugin-postcss": "^1.4.3",
"#snowpack/plugin-svelte": "^3.6.1",
"#snowpack/plugin-typescript": "^1.2.1",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"#testing-library/svelte": "^3.0.3",
"#tsconfig/svelte": "^1.0.10",
"#types/chai": "^4.2.17",
"#types/mocha": "^8.2.2",
"#types/snowpack-env": "^2.3.3",
"#web/test-runner": "^0.13.3",
"autoprefixer": "^10.4.0",
"chai": "^4.3.4",
"concurrently": "^6.4.0",
"cross-env": "^7.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"postcss-cli": "^9.0.2",
"postcss-load-config": "^3.1.0",
"snowpack": "^3.8.7",
"svelte-preprocess": "^4.7.2",
"tailwindcss": "^2.2.19",
"typescript": "^4.3.4"
},
"routify": {
"extensions": "svelte,html,svx,md",
"dynamicImports": false,
"routifyDir": "src/.routify"
}
}
As you can see, I have installed svelte-preprocess which should be responsible for processing the postcss, as well as the other needed packages. The configuration for the project is as follows:
svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess({
defaults: {
script: "typescript",
style: "postcss",
},
postcss: true,
}),
};
snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: [
"#snowpack/plugin-svelte",
"#snowpack/plugin-dotenv",
"#snowpack/plugin-typescript",
"#snowpack/plugin-postcss",
],
routes: [
/* Enable an SPA Fallback in development: */
{ match: "routes", src: ".*", dest: "/index.html" },
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
knownEntrypoints: ["#roxi/routify/runtime/buildRoutes"],
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
};
postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
};
tailind.config.js
const production = process.env.NODE_ENV === "production";
module.exports = {
mode: "jit",
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
purge: { content: ["./src/**/*.svelte"], enabled: production },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {/*...*/},
},
variants: {
extend: {},
},
plugins: [],
};
Do you have any idea if it's a configuration problem or is something related to the editor?
While following the official guide for TailwindCSS with PostCSS I find myself with the error:
#parcel/transformer-postcss: Could not resolve module "tailwindcss/nesting" from "C:\Users\Daniel\source\repos\AFP_Reservas\.postcssrc"
My .postcssrc file looks like this:
{
"modules": false,
"plugins": {
"postcss-import": {},
"tailwindcss/nesting": {},
"tailwindcss": {}
"autoprefixer": {
"grid": true
}
}
}
tailwind.config.js looks like this:
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [
'./Maquetas/home.html'
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
And I have the following dependencies installed:
"devDependencies": {
"#parcel/transformer-sass": "^2.0.0",
"autoprefixer": "^10.4.0",
"parcel": "^2.0.0",
"postcss": "^8.3.11",
"postcss-import": "^14.0.2",
"postcss-nested": "^5.0.6",
"tailwindcss": "^1.9.6"
}
Am I missing something? I tried installing #tailwindcss/nesting, but the nesting module is supposed to be a part of the core tailwindcss module.
Because I'm using Tailwind version 1.9 (to support Internet Explorer due to client needs) I can't use tailwindcss/nesting, according to the 1.9 documentation you have to use postcss-nested.
i have a basic html file (index.html), my project structure is like below :
index.html
tailwind.config.js
postcss.js
tailwind.css
dist.css
and here contents for each files
module.exports = {
purge: {
enabled:true,
content:['./*.html', './**/*.html'],
layers: ['components']
},
theme: {
extend: {
fontSize:{
'small' : '.6rem',
// Or with a default line-height as well
'3xl': ['2.5rem', {
lineHeight: '50px',
}],
'6xl': ['3.70rem', {
lineHeight: '60px',
}],
},
colors:{
transparent: 'transparent',
current: 'currentColor',
orange:{
DEFAULT: '#F47521'
}
},
screens: {
'sm': '640px',
'md': '760px',
'custom' : '980px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1600px',
'xxl' : '1700px'
}
}
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'visited'],
},
plugins: [
({addUtilities}) => {
const utils = {
'.translate-x-half': {
transform: 'translateX(50%)',
},
};
addUtilities(utils, ['responsive'])
}
]
};
the postcss file
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
and my package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "my theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "NODE_ENV=production npx tailwindcss-cli#latest build tailwind.css -o dist.css",
"build:css": "postcss tailwind.css -o dist.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.8",
"tailwindcss": "^2.0.4"
},
"dependencies": {
"cssnano": "^4.1.10",
"postcss-cli": "^8.3.1"
}
}
when building with : npm run build, tailwind build the project but the dist.css size remains 5,7MB
What i'm doing wrong here?
thank you
You have purge configured to apply to the 'components' layer.
Tailwind has three layers: 'base', 'components', and 'utilities'. Components is the smallest of the three so its impact on the resulting filesize will be fairly minimal. You're hitting 5.7MB because by far the largest layer, 'utilities', is being ignored.
Update your purge configuration to apply to utilities too. Unless there's a good reason to be selective with layers, you probably want to drop any specificity and allow it to apply to all layers.
Furthermore, if you leave out enabled, it will be handled automatically based on your NODE_ENV setting.
https://tailwindcss.com/docs/optimizing-for-production#purging-specific-layers