Where is the tailwindcss source?

[jdmarshall]

Pretend someone new to Phoenix is also new to Tailwind.

The source for the tailwind CSS is nowhere in the project directory. I've looked with 'find', and none of the contents of app.css are anywhere in the project root.

Any unused css classes are deleted in app.css, and the tailwind website has... very poor information density. Which makes for poor discovery. Where is it hiding the CSS at?

[optikfluffel]

Have a look at the *.html.heex files and at core_components.ex. All those class="..." in the html are for Tailwind.

[jdmarshall]

That only gets you as far as “monkey see, monkey do”

Oh god. Tailwind has no source does it. It’s entirely procedurally generated and not using Less or SCSS to do so. 🤯

I found a forum thread lamenting that tailwind cannot be turned off from the phoenix generators. If I could get some help I think I would be amenable to collaborating to file a PR to make it into a config. If a few people put the 👀 upvote on this comment I’ll see about making a fork and contacting you.

[SteffenDE]

@jdmarshall I don’t know what forum thread is telling this, but the generators have a --no-tailwind flag that does not include Tailwind. In general, Phoenix does not enforce any CSS or JavaScript framework at all. You can completely roll your own, SASS, Less, whatever. For example there is https://github.com/CargoSense/dart_sass.

[jdmarshall]

I’ve seen the templates,

phoenix/priv/templates/phx.gen.live/core_components.ex

Line 48 in 1d94bbb

"fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",

That’s tailwind css. And loads of it.