Document how to compile Tom Select's Sass against Tabler 1.5

This commit is contained in:
codecalm committed 2026-09-16 17:45:54 +02:00
1 parent acfdc4e25c
commit a65771caa7
2 files changed
+23

No files matched your search

@@ -292,6 +292,16 @@ The `*.rtl.css` files are still published, so nothing breaks if you keep them. S
- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) - the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
- **Tabler Icons** moved to 3.46, and **Tabler Illustrations** to 1.16.
- **Tom Select** cannot be compiled from its Sass sources against Tabler anymore. Its `tom-select.bootstrap5.scss` reads Bootstrap variables such as `$border-color` and passes them to `color.adjust()`, but in Tabler these are now CSS variables like `var(--gray-200)`, which is not a color to Sass. Use the compiled `tom-select.bootstrap5.css` instead, or set the two variables Tom Select adjusts to plain colors before importing it:
```scss
// `as *` keeps Tabler's variables visible to the @import below
@use '@tabler/core/scss/tabler' as *;
$select-color-text: #182433;
$select-color-item-border: #e6e7e9;
@import 'tom-select/dist/scss/tom-select.bootstrap5';
```
## Browser support
@@ -41,6 +41,19 @@ Or include it from a CDN. You need both the script and its stylesheet:
<script src="${site.cdnUrl}/dist/libs/tom-select/dist/js/tom-select.base.min.js"></script>`}
/>
### Compiling the Sass sources
Use the compiled `tom-select.bootstrap5.css`. Tom Select's Sass sources read Bootstrap variables such as `$border-color` and pass them to `color.adjust()`, and in Tabler those variables hold CSS custom properties like `var(--gray-200)`, so Sass stops with `$color: var(--gray-200) is not a color`. If you still want to compile it, set the variables Tom Select adjusts to plain colors first:
```scss
// `as *` keeps Tabler's variables visible to the @import below
@use '@tabler/core/scss/tabler' as *;
$select-color-text: #182433;
$select-color-item-border: #e6e7e9;
@import 'tom-select/dist/scss/tom-select.bootstrap5';
```
## Usage
### Basic select