Breakpoints are rendered before normal styles when bundled using tailwind

[osiloke]

This only happens when bundled with tailwind cli. The CDN static css works as expected.

This is due to the placement of width media query directives before the general css directives in the released npm package.

[osiloke]

Moving the media assignment code below the base css assignments solves this issue. Please let me know if i can submit a PR.

[sveltecult]

Hello @osiloke

Thank you for reporting this issue. You are absolutely right that it only occurs when bundled with Tailwind CLI, whereas the CDN static CSS works as expected.

Have you considered installing PostCSS alongside Tailwind CLI? Alternatively, you could use npm create vite@latest, which comes with built-in PostCSS support. This would allow you to simply run npx franken-ui init -p and have everything set up for you.

Regarding your suggestion to move the media assignment code below the base CSS assignments, I appreciate your willingness to submit a PR. However, I believe I've explored this solution before and found that it can still cause issues due to improper sorting. I know, it's weird. I expected browser to sort rules by themselves but I was wrong. If I remember correctly, it's the Width component that's malfunctioning.

During the early releases I discussed this in the docs. But, it already been updated multiple times and eventually got removed and replaced by the CLI method.

The simplest solution would be to utilize PostCSS, which is already included in the package. This would eliminate the need for additional installations and also remove duplicated rules caused by hooks.

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('franken-ui/postcss/sort-media-queries')({
            sort: 'mobile-first'
        }),
        require('franken-ui/postcss/combine-duplicated-selectors')({
            removeDuplicatedProperties: true
        })
    ]
};

[osiloke]

Ok that makes sense. I'm using a Go/HTMX setup so vite is not an option.

However, the postcss fix works. Thank you for the suggestion.