Nuxt3 dynamic images showing in dev env. not in build - nuxtjs3

I am using :src to render dynamic images. They are rendered in dev env. But do not appear after running yarn build.
<img class="rounded-lg object-cover shadow-lg" :src="person.imageUrl" alt=""/>
"imageUrl": "/assets/images/team/Jamiepleasants.jpg"


At the end, OP solved the issue by using the image module of Nuxt: https://github.com/nuxt/image

Related

Everything but the media queries work in tailwind css react project

All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.

Easiest way to check if Tailwind is installed

I am playing around with Tailwind and Next.js, but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
It doesn't render it underlined or even an h1 element. I follow the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?

The reason it's not working for you is that you are using className instead of class.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
Using NPM, you can see if a specific package is installed.
npm view tailwindcss version
Or
npm info tailwindcss version
If you're using NPX, you can do the following.
npx gvi tailwindcss

¿Why some classes of tailwind don't work?

I have a project created with Laravel 8, Jetstream, I've installed Tailwind CSS and fontawesome-free too.
When I use this classes like that:
<i class="fa fa-user-circle text-white cursor-pointer text-6xl"></i>
text-white and cursor-pointer works perfectly but "text-6xl" don't
if I use style="font-size: 60px" this works, but the class of Tailwind don't

The issue is that using laravel 8 with scss, but the output for your tailwind is css, try changing it and it should work.

Run npm run dev
Not all of tailwind css classes will be available unless you build dev assets.
You can also npm run dev watch to watch the files and recompile when one of them changes.

TailwindCSS responsive break points not working in Vue

I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.

Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}

Rails 4 image files stored in vendor/images can't be found in the view

I got a custom bootstrap theme up and running with Rails 4, I put the image file at this location:
/vendor/assets/images/custom_bootstrap_theme/demo/bg01.jpg
and here's how the index.html.erb consumes this image:
<img src="/vendor/assets/images/custom_bootstrap_theme/demo/bg11.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" alt="">
but bg01.jpg can't be found, could anyone help me with this? Thanks !

Change the src to
src="/assets/custom_bootstrap_theme/demo/bg11.jpg"
And then have a read here

Resources