vue - tailwindcss 和 element-ui 冲突处理_tailwindcss和elementui

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

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

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

引入tailwindcss

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

引入 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

引入 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);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

引入 index.scss

@import 'element.scss';
@import 'var.css';
@import 'tailwind.css';
1
2
3

main.ts 引入
import ‘./styles/index.scss’
elementui 样式 import ‘element-plus/es/components/dialog/style/css’