non elm-css version

[atomkirk]

If I wanted to use this without elm-css, do you have any advice?

Would forking it work? Any chance you'd be willing to give me some hints on what I'd need to remove/refactor to make it work?

[matheus23]

Can you provide an example of what the API should look like? There needs to be some way of adding the CSS to the page. Do you want to use inline styles instead? Keep in mind that you can't use media queries or pseudoClasses like :hover with inline styles, though.

Otherwise, if you only want autocomplete for tailwind's class names and include a pre-built tailwind .css file, you can try something like https://github.com/monty5811/postcss-elm-tailwind.

Would forking it work? Any chance you'd be willing to give me some hints on what I'd need to remove/refactor to make it work?

Feel free to fork! But I can't comment on what you'd need to refactor, because I don't know what you want to use as an alternative to elm-css.

[matheus23]

Oh and: Why do you want to replace elm-css? Maybe there's another way to solve your problems :)

[atomkirk]

well, I was hoping the API would look pretty much the same, but you bring up a good point, elm-css compiles it all into style sheets, where what I assumed would happen would be inline styles (which you can't do media queries with). So I guess there probably isn't a way 🤷🏻

I need my css to be sharable across platforms because I do things like generate pdfs on the backend that need the styles, where elm-css would make them very elm specific. I put all of my design system components in css files and then I do inline styles for page-wide layout tasks, like flexbox, margins, etc and I want to use a typesafe tailwind for that.

[atomkirk]

Maybe I can use elm-css + this for just layout tasks like I was describing. I'll give it a shot :)

[atomkirk]

Looks like everything is using Css.property, so in theory those could be swapped out for just style, but I can't see a way to do breakpoints without elm-css.

Also, when I generated the files, they didn't respect my tailwind.config.js. For example, I have custom module.exports.theme.spacing values. Is that expected?

[matheus23]

I need my css to be sharable across platforms because I do things like generate pdfs on the backend that need the styles, where elm-css would make them very elm specific. I put all of my design system components in css files and then I do inline styles for page-wide layout tasks, like flexbox, margins, etc and I want to use a typesafe tailwind for that.

We're in a similar boat at work. Our solution for this is: We have a single tailwind configuration as our "source of truth". We don't define custom styles in elm-css, we only use what's provided by tailwind. Then we can use elm-tailwind-modules for anything in elm. If, say, your marketing pages are written in React and SSR'd, then you can use the same tailwind config file for tailwind how you'd use it usually (completely without elm-tailwind-modules).

By re-using the same tailwind config, the config file will always be your source of truth for styling.

Also, when I generated the files, they didn't respect my tailwind.config.js. For example, I have custom module.exports.theme.spacing values. Is that expected?

Yes! If you're using the elm-tailwind-modules CLI, you can pass the --tailwind-config option to provide a path to your tailwind.config.js file. Also, make sure you're using the most recent version of elm-tailwind-modules, as we've changed something in the latest version regarding that option.

[atomkirk]

That did it! I'm in business! Maybe it should look for tailwind.config.js in the directory in which the command is run by default?

[matheus23]

That did it! I'm in business! Maybe it should look for tailwind.config.js in the directory in which the command is run by default?

Good suggestion. By default it assumes a default tailwind configuration. It should at least notify the user that it's using a default tailwind configuration file instead of whatever might be on disk. :+1: