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

Tailwind setup using the Standalone Package does not contain all tailwind CSS Classes #58

Open
matthewnaples opened this issue Nov 27, 2024 · 1 comment

Comments

@matthewnaples
Copy link

matthewnaples commented Nov 27, 2024

When building an app, I successfully setup the tailwind standalong package, but it seems like some of the tailwind css classes are missing in the output.css such as: "text-4xl", "animate-spin", "animate-bounce". I don't have an exhaustive list, but those are just a few.

Steps to reproduce.

installations and setup:
pip install python-fasthtml
pip install shad4fast
shad4fast setup
shad4fast build
python main.py

the main.py is defined below. When running it, toggle the "hdrs=" line and you'll see the difference — using the CDN produces the correct screen, and using the standalone package does not. (screenshots below)

I expect that the CDN and the Standalone Package setup methods have identical output.css, assuming I execute the steps above and no others.

from fasthtml.common import *
from shad4fast import *
app, rt = fast_app(
    pico=False,
    # hdrs=(ShadHead(tw_cdn=True, theme_handle=True),), # this one has all classes
    hdrs=(ShadHead(tw_cdn=False, theme_handle=True),), #this one does not
)
@rt("/")
def get():
        return Div(
        Div(
            Div(
                H1(
                    "Here is a title",
                    cls="text-4xl tracking-tighter font-semibold mt-10 text-center animate-pulse",
                ),
                P("Here is a paragraph", 
                  cls="text-muted-foreground"
                ),
                cls="space-y-3"
            ),
            cls="w-full space-y-6 text-center"
        ),
        cls="flex items-center min-h-screen px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16"
    )

serve()

When using the Standalone Package:

Screenshot 2024-11-27 at 8 24 16 AM

When using the CDN:

Screenshot 2024-11-27 at 8 24 37 AM

Am I setting tailwind up incorrectly or something? I made no edits to any of the tailwind files. I just ran the commands above in that order and got these results.

Thank you! The package is awesome by the way!

@matthewnaples
Copy link
Author

Okay I fixed it. I just added all the following plugins to the described in the docs

This is probably the expected behavior given that it's outlined in the docs. Maybe that's correct given my limited understanding of tailwind, but I had the intuition that I could build my app using the CDN, then just run the scripts and change the tw_cd to false in the headers, and I'd be on my way.

Thanks again!

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

1 participant