vue - tailwindcss 和 element-ui 冲突处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue - tailwindcss 和 element-ui 冲突处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用tailwindcss 情况下，有时候会导致element-ui的样式失效最常见的是butten按钮的样式就变了

其实情况也比较简单，也就是先引入tailwindcss 再引入element-ui 这样element-ui就会覆盖掉tailwindcss
但是这种情况又会导致tailwindcss 部分样式出不来

所以在保证tailwindcss的情况下对于element覆盖的样式再重新定义

引入tailwindcss

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

引入 var.css

:root {
    /*--el-font-family: theme(fontFamily.sans);*/
    --el-font-weight-primary: 400;
    --el-menu-item-height: 46px;
    --el-menu-sub-item-height: var(--el-menu-item-height);
    --el-menu-icon-width: 18px;
    --aside-width: 200px;
    --navbar-height: 50px;
    --color-white: #ffffff;
    --table-header-bg-color: #f8f8f8;
    --el-font-size-extra-large: 18px;
    --el-menu-base-level-padding: 16px;
    --el-menu-level-padding: 26px;
    --el-font-size-large: 16px;
    --el-font-size-medium: 15px;
    --el-font-size-base: 14px;
    --el-font-size-small: 13px;
    --el-font-size-extra-small: 12px;

    --el-bg-color: var(--color-white);
    --el-bg-color-page: #f6f6f6;
    --el-bg-color-overlay: #ffffff;
    --el-text-color-primary: #333333;
    --el-text-color-regular: #666666;
    --el-text-color-secondary: #999999;
    --el-text-color-placeholder: #a8abb2;
    --el-text-color-disabled: #c0c4cc;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-border-color-extra-light: #f2f2f2;
    --el-border-color-dark: #d4d7de;
    --el-border-color-darker: #cdd0d6;
    --el-fill-color: #f0f2f5;
    --el-fill-color-light: #f8f8f8;
    --el-fill-color-lighter: #fafafa;
    --el-fill-color-extra-light: #fafcff;
    --el-fill-color-dark: #ebedf0;
    --el-fill-color-darker: #e6e8eb;
    --el-fill-color-blank: #ffffff;
    --el-mask-color: rgba(255, 255, 255, 0.9);
    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
    -el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
        0px 8px 16px -8px rgba(0, 0, 0, 0.16);
}

引入 element.scss 重写样式

:root {
    // 弹窗居中
    .el-overlay-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        position: static;

        .el-dialog {
            --el-dialog-content-font-size: var(--el-font-size-base);
            --el-dialog-margin-top: 50px;
            max-width: calc(100vw - 30px);
            flex: none;
            display: flex;
            flex-direction: column;
            border-radius: 5px;

            &.body-padding .el-dialog__body {
                padding: 0;
            }

            .el-dialog__body {
                flex: 1;
                padding: 15px 20px;
            }
            .el-dialog__header {
                font-size: var(--el-font-size-large);
            }
        }
    }

    .el-drawer {
        --el-drawer-padding-primary: 16px;
        &__header {
            margin-bottom: 0;
            padding: 13px 16px;
            border-bottom: 1px solid var(--el-border-color-lighter);
        }
        &__title {
            @apply text-tx-primary;
        }
    }

    .el-table {
        --el-table-header-text-color: var(--el-text-color-primary);
        --el-table-header-bg-color: var(--table-header-bg-color);
        font-size: var(--el-font-size-base);

        thead {
            th {
                font-weight: 400;
            }
        }
    }

    .el-input-group__prepend {
        background-color: var(--el-fill-color-blank);
    }

    .el-checkbox {
        --el-checkbox-font-size: var(--el-font-size-base);
    }

    .el-menu--popup-container {
        &.theme-light {
            .el-menu {
                .el-menu-item {
                    &.is-active {
                        @apply bg-primary-light-9 border-primary border-r-2;
                    }
                }
                .el-menu-item:hover,
                .el-sub-menu__title:hover {
                    color: var(--el-color-primary);
                }
            }
        }
        &.theme-dark {
            .el-menu {
                .el-menu-item {
                    &.is-active {
                        @apply bg-primary;
                    }
                }
            }
        }
    }

    .el-message-box {
        --el-messagebox-width: 350px;
    }
    .el-date-editor {
        --el-date-editor-width: 280px;
        .el-range-input {
            font-size: var(--el-font-size-small);
        }
    }

    .el-button--primary {
        --el-button-hover-link-text-color: var(--el-color-primary-light-3);
    }
    .el-button--success {
        --el-button-hover-link-text-color: var(--el-color-success-light-3);
    }
    .el-button--info {
        --el-button-hover-link-text-color: var(--el-color-info-light-3);
    }
    .el-button--warning {
        --el-button-hover-link-text-color: var(--el-color-warning-light-3);
    }
    .el-button--danger {
        --el-button-hover-link-text-color: var(--el-color-danger-light-3);
    }
    .el-image__error {
        font-size: 12px;
    }
    .el-tabs__nav-wrap::after {
        height: 1px;
    }
}
@media (max-width: 768px) {
    .el-pagination > .el-pagination__jump {
        display: none !important;
    }
    .el-pagination > .el-pagination__sizes {
        display: none !important;
    }
}

.el-button {
    // 防止被tailwindcss默认样式覆盖
    background-color: var(--el-button-bg-color, var(--el-color-white));

    //覆盖el-button的点击样式
    &:focus {
        border-color: var(--el-button-border-color);
        background-color: var(--el-button-bg-color);
    }
    &:hover {
        color: var(--el-button-hover-text-color);
        border-color: var(--el-button-hover-border-color);
        background-color: var(--el-button-hover-bg-color);
    }
}

引入 index.scss

@import 'element.scss';
@import 'var.css';
@import 'tailwind.css';

main.ts 引入
import ‘./styles/index.scss’
elementui 样式 import ‘element-plus/es/components/dialog/style/css’文章来源地址https://www.toymoban.com/news/detail-503710.html

到了这里，关于vue - tailwindcss 和 element-ui 冲突处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！