Allow completely user-specified CSS

[succinct]

Is there a way to prevent loading the standard vue-tags-input css, so that we can specify exactly how we want to style tags? Alternately, maybe we could get a slot for the tag wrapper (<li>) itself?

[al3d]

While it's possible to override the default styling by adding !important to the styles, this isn't the ideal behaviour - it has been briefly addressed in issue #108 but for me still leaves a bitter taste in the mouth.

I'd like to see vue-tags-input shipped with a "bare-minimum" set of styles that takes care of the most important aspects such as positioning etc. while not making assumptions for commonly-customised aspects such as text and background colours, margins and paddings etc.

I believe the easiest way to allow this is to drop the scoped attribute in the reference to the (s)css file in the vue-tags-input.vue file. Unless there's a good reason for it, I don't see why the scoped attribute is there - it would allow overriding the styles quite easily in a CSS-specificity-friendly manner. To override styles you'd only need to write CSS with slightly higher specificity to what is given i.e.

.container .vue-tags-input .ti-tag {
    background-color: indigo;
}

would override the default .vue-tags-input .ti-tag styles - without the need to add !important.

Another option would be to not include the css in the vue-tags-input.vue file, allowing the css to be imported directly from the library. This will probably break backwards compatibility but would offer the obvious flexibility in customisation, however without the bare-minimum CSS.

Lastly, another option would be to extract the template html into its own file, allowing you to import what you need (ref).

[quinhone]

Hi, I changed the colors directly in the vue-tags-socket.scss file inside the node-modules folder, but still the background color did not change and kept the default colors

[jconti]

I needed to override max-width with !important. I think these parameters should be specified outside, or in this case with flex.

[ilyen85]

You just have to make the selector more specific, no need to use !important-s.

For e.g:

<style lang="sass">
.tags_input_field
    .vue-tags-input.vue-tags-input
        max-width: 100%

This will be specific enough to set 100% as a max width

so basically wrap the whole thing in div with the class tags_input_field or anything you would like, than double the class name to make it more specific.

[jpamorgan]

@ilyen85 is correct. I went through all of my styles and added the data attribute to each of the classnames to match the specificity of the native styles and was successfully able to override any styles I wanted.

Here are some examples of the selectors I used:

vue-tags-input[data-v-61d92e31] {}
.vue-tags-input[data-v-61d92e31] .ti-new-tag-input[data-v-61d92e31] {}
...

My final product: