Class styles don't seem to work. #17

CoreyVincent · 2022-03-04T15:41:22Z

Styles don't seem to work. I've used the class attribute to add multiple classes. None of them show up.
I would prefer this to having to use the style attribute and write out all the styles.

Here's an example:

import { inject } from 'vue'
import { Toast } from 'vue-dk-toast'

const toast = inject<Toast>('$toast')

if (toast) toast('Gray', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-gray-200', 'rounded-sm']
})
if (toast) toast('Blue', {
    duration: false,
    positionY: 'top',
    positionX: 'right',
    disableClick: false,
    class: ['bg-blue-400', 'rounded-sm']
})

Daniel-Knights · 2022-03-04T15:45:58Z

Are you calling inject outside setup? It only works inside

CoreyVincent · 2022-03-04T15:59:54Z

I'm using <script setup lang='ts'>.

I just tried this with the same results.:

<script lang="ts">
import { Toast } from 'vue-dk-toast'
export default {
    setup() {

        const toast = inject<Toast>('$toast')
        if (toast) toast('Blue', {
            duration: false,
            positionY: 'top',
            positionX: 'right',
            disableClick: false,
            class: ['bg-blue-400', 'rounded-sm'],
            slotLeft: '<svg className="max-w-6 max-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        })
        return {

        }
    }
}
</script>

Daniel-Knights · 2022-03-04T16:00:58Z

If you check dev-tools do the classes get applied to the element?

CoreyVincent · 2022-03-04T16:04:56Z

They seem to:

And all my other styling are showing up correctly, just not on the toasts.

Daniel-Knights · 2022-03-04T16:22:50Z

Okay, think it might just be an issue with style specificity in that case. Could you check the styles to see if any of the dk__... classes are overriding the Tailwind classes?

I've made the classes as flat and low specificity as possible but would be good to know if it doesn't play nice with Tailwind

CoreyVincent · 2022-03-04T16:33:35Z

That does perhaps look to be the case:

Daniel-Knights · 2022-03-04T16:44:22Z

Does Tailwind append a stylesheet to <head>?

Just wondering if you could get around this by initialising Tailwind before the toast, so the stylesheet appears first

CoreyVincent · 2022-03-04T17:25:46Z

That's a good question.
It looks like Tailwind is being initialized before your toasts.
I'm using vite with tailwind, I have no idea how to control the import order though. I would imagine we would want the toast first, I think that's how css works(latter styling overwrites the earlier styling).

*Really hard to write letters with a mouse 😣

Daniel-Knights · 2022-03-04T17:31:57Z

Ah yeah, maybe import the Tailwind CSS file in App.vue? Should load it after the toast I think

CoreyVincent · 2022-03-04T17:53:07Z

Yup, that did it.

Moved the @tailwind imports into the <style> tag of App.vue.

Does not work if you keep the @tailwind imports in a main.css and import that in the <script> tag of App.vue.
Must be placed in the <style> tag.

Not sure if that's the best way of doing it, but I'll work with it for now.
@Daniel-Knights Thanks for your help.

CoreyVincent · 2022-03-04T17:54:13Z

Any chance you can remove the styles that are non-essential? It would allow for a more bare-bones styling approach.

Daniel-Knights · 2022-03-04T18:02:53Z

Noice, no problem.

Changing base styles would be a breaking change at this point and I think it wouldn't serve much purpose in terms of usability. Maybe an extra option to remove them 🤔 I'll think on that one

CoreyVincent · 2022-03-04T19:29:33Z

I spoke too soon.
It appears to still be overriding the styles. I'm trying to figure out why, but it's randomly overriding the styles.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Class styles don't seem to work. #17

Class styles don't seem to work. #17

CoreyVincent commented Mar 4, 2022 •

edited

Loading

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 •

edited

Loading

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022 •

edited

Loading

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 •

edited

Loading

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 •

edited

Loading

Class styles don't seem to work. #17

Class styles don't seem to work. #17

Comments

CoreyVincent commented Mar 4, 2022 • edited Loading

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 • edited Loading

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022 • edited Loading

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 • edited Loading

CoreyVincent commented Mar 4, 2022

Daniel-Knights commented Mar 4, 2022

CoreyVincent commented Mar 4, 2022 • edited Loading

CoreyVincent commented Mar 4, 2022 •

edited

Loading

CoreyVincent commented Mar 4, 2022 •

edited

Loading

Daniel-Knights commented Mar 4, 2022 •

edited

Loading

CoreyVincent commented Mar 4, 2022 •

edited

Loading

CoreyVincent commented Mar 4, 2022 •

edited

Loading