Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

responsive classes nor generated #201

Open
gurumark opened this issue Aug 3, 2024 · 5 comments
Open

responsive classes nor generated #201

gurumark opened this issue Aug 3, 2024 · 5 comments

Comments

@gurumark
Copy link

gurumark commented Aug 3, 2024

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
Copy link
Owner

nusserstudios commented Aug 5, 2024

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
Copy link
Author

gurumark commented Aug 6, 2024

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
Copy link
Owner

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
Copy link
Author

gurumark commented Aug 7, 2024

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants