nusserstudios / tailbliss

TailBliss is a Hugo Starter theme built on TailwindCSS 3, and Alpine.JS.
https://tailbliss.netlify.app/
Apache License 2.0
320 stars 147 forks source link

responsive classes nor generated #201

Open gurumark opened 3 months ago

gurumark commented 3 months ago

Hello, Thanks for your work. I started using the latest version on the theme and ran into an issue regarding class generation. For example; I have the following markup on index.html at the root of the site:

when I run npm run build, the following code's css does not show on the generated style.css under the public directory: @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } Is there anything I can do on this issue. Thanks!

nusserstudios commented 3 months ago

They should be added through just fine as long as the div has the classes. If you're making any changes to markup it needs to be in layouts/index.html.

I addded what you're looking for just fine with this markup:

 <div class="mx-auto my-32 max-w-7xl">
        <div class="grid grid-cols-2 gap-2 lg:grid-cols-4">
            <div>
                <img src="https://placehold.co/600x400">
                <p class="text-center text-white">Test</p>
            </div>
            <div>
                <img src="https://placehold.co/600x400">
                <p class="text-center text-white">Test</p>
            </div>
            <div>
                <img src="https://placehold.co/600x400">
                <p class="text-center text-white">Test</p>
            </div>
            <div>
                <img src="https://placehold.co/600x400">
                <p class="text-center text-white">Test</p>
            </div>
        </div>
    </div>
Screenshot 2024-08-05 at 2 57 37 PM
gurumark commented 3 months ago

In my case, the following on index.html does not generate the proper media queries although styles.css file is recreated every time:

I have no idea how to debug this though :-(
nusserstudios commented 3 months ago

Can you maybe tell me what version of node you are using, and the exact paths of the assets you are trying to change? When you run npm run start, are you going to http://localhost:1313 to see changes being updated in realtime?

gurumark commented 3 months ago

I have Node.js v18.17.1 and it is index.html at https://github.com/nusserstudios/tailbliss/tree/main/layouts. I do npm run build on a remote box. Thank you.

nusserstudios commented 2 months ago

I could not authenticate this issue. I was able to put it on a Coolify.io and make changes right on the server. I did have some issues with changing colors, so those may need to be included in a safe in Tailwind config, but otherwise, I added columns with no issues.