When I've started working on my project, which is basic HTML with Tailwind CSS installed, everything worked fine. I could use all values in classes containing numbers, for example text-2xl, text-8xl, text-9xl and ml-2, mt-6 etc.
But something went wrong and now most of these values won't work. I can't use text-2xl/4xl/5xl/6xl/8xl/9xl, but text-3xl/7xl works fine, like it used to when I started working on the project. Same with margins. For example ml-1/2/3/4 wont work, but ml-5 works like it used to.
HTML:
<body class="h-screen w-screen overflow-x-clip scroll-smooth">
<div class="h-screen w-screen flex justify-center bg-gradient-to-bl from-sky-300 to-sky-500">
<div class="h-full w-full grid xl:grid-cols-2 items-center">
<div class="flex flex-col w-full h-full justify-center text-white font-slab">
<h1 class="text-7xl ml-5">Szia!</h1>
</div>
</div>
<img class="absolute w-1/4 md:w-1/12 xl:w-[4%] left-auto right-auto bottom-[5%] animate-bounce"
src="../src/scroll.png" alt="" />
</div>
</body>
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
fontFamily: {
'oswald': ['"Oswald"', 'sans-serif'],
'slab': ['"Roboto Slab"', 'serif'],
},
},
plugins: [],
}
I don't know what I did wrong or what caused this to happen.
I deleted most of the classes which included custom values, like xl:w-[4%], because I though maybe that's what was causing the problem, but as far as I noticed, nothing changed.
I also tried searching for the classes in the web inspector tab, but they aren't being applied at all.
Edit: Deleting Just-In-Time from the config file, then npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch on my folder solved the issue.
May be jit is causing the problem try deleting the jit file from the config
And try watching again using
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Related
On Next 13, after replacing <img for <Image, the image requests never loads.
Its a Magento image, coming from the product.
However, Magento's server never receives the GET request from next for the image.
For example:
http://localhost:3000/_next/image?url=https%3A%2F%2Fmagento2.magenteiro.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Fcb2ae50ad1efe9ed2d45d11fc48a28dc%2Fl%2Ft%2Flt01.jpg&w=3840&q=75/
I can decode 2 URL's from here:
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg&w=3840&q=75
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg
Both would load an image from the remote server, but next never got there.
Am I missing something?
# next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {appDir: true},
images:{
domains: ['www.floatui.com', 'magento2.magenteiro.com', 'source.unsplash.com']
}
}
module.exports = nextConfig
Part of my productList.jsx component:
{products.map((product) => (
<>
<a key={product.url_key} href={product.url_key} className="group">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
<Image
src={product.image.url}
alt={product.image.label}
title={product.image.label}
fill={true}
className="h-full w-full object-cover object-center group-hover:opacity-75"
/>
</div>
<h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
<p className="mt-1 text-lg font-medium text-gray-900">$ {product.price_range.minimum_price.final_price.value}</p>
</a>
{product.image.url}
</>
))}
In another attempt to figure this out, I served my /public/images directory with php server, and replaced src="http://localhost:4444/produto2.jpg".
I could confirm that next called the URL, but it never finishes loading the image.
If I add unoptimized={true} forcing Image to request the original image, then it works.
It seems to be a bug on Next in some version between 13.0.0 and 13.0.2.
I started a new project and it worked. The new project was using Next 13.0.3.
So, upgrading Next.js (npm i next#13.*) solved the problem for me.
Note that by doing this, you will be changing your constraint, and newer versions of Next.js 13 may be installed on your system.
I'm trying to use a simple Tailwind date picker component in a svelte kit app, however the calendar popup is not appearing. I assume it has something to do with SRR. I was able to make some progress on the installation of Tailwind elements by importing the module with onMount():
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async() => {
if(browser) {
await import('tw-elements');
}
});
However, the calendar icon and the popup are still not rendering. (They also do not render when I include the CDN in app.html). Is there a solution?
tailwind.config.js (P.S. night wind works just fine):
module.exports = {
darkMode: "class",
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
extend: {},
},
plugins: [
require("nightwind"),
require("tw-elements/dist/plugin")
],
}
The docs are horrible, but it does work. Here's how I got it going.
In your Svelte Kit layout, import CSS for tw-elements and Font awesome. This is critical because the datepicker icon uses Font Awesome by default, and when you click the icon it opens the picker.
import 'tw-elements/dist/css/index.min.css'
import '#fortawesome/fontawesome-free/css/fontawesome.min.css'
import '#fortawesome/fontawesome-free/css/solid.css'
<div class="datepicker relative form-floating mb-3 xl:w-96">
<input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Select a date"/>
<label for="floatingInput" class="text-gray-700">Select a date</label>
</div>
In Svelte onMount:
// I didn't even need the if (browser) statement)
// import the library
onMount(async () => {
await import('tw-elements/dist/src/js/index.js')
})
It looks like it is using the MD Bootstrap Datepicker which is a premium feature of MDB Pro and is not free.
I have this rails reactjs app that if I put this line in the form
<input type='submit'/>
It will create for me a blue button. I have just installed Tailwind and if I input this line with tailwind class, it does not have any effect on the button design.
<input type='submit'
className='bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Is there a way that I can override this global settings like putting !important inline in the className?
Any help would be greatly appreciated.
You can add a ! character before the class name and that should do the job
Example:
<input type='submit'
className='!bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Docs: https://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier
Yes, You can config tailwind.config.js if you add this
module.exports = {
important: true,
}
this will generate all tailwind classes as !important
read more here
I am using a form builder package which keeps the classes in the PHP files (see below one example).
However purge is removing these css classes thus they are not applying.
Trying to work if you can can regex a php file as the data is all as follows
Arrays like below..
'label_class' => 'ml-2 block text-sm text-gray-900 capitalize',
'field_class' => 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'
My (current, not working) config.
mode: "jit",
purge: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./app/Forms/Auth/LoginForm.php",
],
Any help much appreciated
I'm building a personal website with Nextjs and I'm encountering a weird issue with the Public folder. Per the documentation, static images are to be put in the Public folder. This works perfectly for all images in my local development mode. However, as soon as I push this to production with Vercel, some images would fail to render (showing broken image). I noticed it seems to load jpg images fine but not png / svg. I don't use next-images module and just use a simple tag.
My file structure (simplified) is:
public
static
Melbourne.jpg
avatar.png
pages
index.jsx
In my index.jsx (also super simplied)
function Homepage({ data }) {
return (
<motion.div id='home' initial='initial' animate='enter' exit='exit'>
<section
id='intro'
className='bg-dark flex content-center flex-wrap p-40 justify-center text-center min-h-screen w-screen'>
<div className='flex flex-col justify-center'>
<motion.img
src='/static/avatar.png' <-- Works in Dev but not Prod
className='flex mx-auto rounded-full h-32 w-32'
variants={{
initial: { opacity: 0 },
enter: {
opacity: 1,
transition: {
ease: 'easeIn',
duration: 0.5,
delay: 0.75,
},
},
}}
/>
</div>
</section>
<section id='about' className='bg-light w-screen p-10'>
<div className='h-2 border-t-4 border-dark w-10/12 flex flex-column mx-auto mt-12' />
<div className='w-1/3 mx-auto relative bottom-12 bg-light'>
<h1 className='font-header text-center'>About Me</h1>
</div>
<div className='flex mx-auto mb-8 w-11/12 md:w-3/4 grid grid-cols-3 gap-6 lg:grid-cols-3'>
<div className='py-8 col-span-2'>
Some text here
</div>
<div className=''>
<img
className='rounded-full w-full h-full'
src='/static/Melbourne.jpg' <-- Works in Dev & Prod
alt='melbourne-skyline'
/>
</div>
</div>
</section>
</motion.div>
);
}
export default Homepage;
Please ignore any possible syntax error, everything works on my end and I deleted a lot of things to simplify this. The only issue I'm encountering is the tag.
Thanks in advance for your help!
You have to rebuild [ npm run build ] the project after adding new assets, then commit the changes.