purgetss/docs/whats-new/v3.0.3.md

A package that simplifies mobile app creation for Titanium developers.

# What's new in v3.0.3
- [What's new in v3.0.3](#whats-new-in-v303)
  - [Even faster purging time](#even-faster-purging-time)
  - [Tabler Icons Font](#tabler-icons-font)
  - [Shadow Color Property](#shadow-color-property)
    - [Box Shadow Color Property](#box-shadow-color-property)
    - [Set the opacity ( from 0 to 100 ) to any shadow color](#set-the-opacity--from-0-to-100--to-any-shadow-color)
    - [Set arbitrary values to shadow colors](#set-arbitrary-values-to-shadow-colors)

## Even faster purging time
**Up to 2.5 faster than [v 2.6.0](https://github.com/macCesar/purgeTSS/blob/master/docs/whats-new/v2.6.0.md#reduced-purge-time)!** On a project with more than 100 XML files, purging time was reduced from 350 ms down to 140 ms.

## Tabler Icons Font
A set of over 1400 free MIT-licensed [high-quality icons](https://tabler-icons.io) for you to use in your projects.

```xml
<Button class="text-3xl text-indigo-500 bg-transparent ti ti-device-desktop" />
```

```css
// ...
// Tabler Icons styles
'.ti': { font: { fontFamily: 'tabler-icons' } }
'.ti-device-desktop': { text: '\uea89', title: '\uea89' }
// ...
```

[<img src="https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/og.png">](https://github.com/tabler/tabler-icons#preview)

## Shadow Color Property
Continiuing with the new properties from Tailwind CSS v3.0.0, the shadow color property is now available for all Ti components.

### Box Shadow Color Property
```css
// Component(s): Ti.UI.View
// Property(ies): viewShadowColor - Box Shadow in Tailwind
'.shadow-transparent': { viewShadowColor: 'transparent' }
'.shadow-black': { viewShadowColor: '#000000' }
'.shadow-white': { viewShadowColor: '#ffffff' }
'.shadow-slate-50': { viewShadowColor: '#f8fafc' }
'.shadow-slate-100': { viewShadowColor: '#f1f5f9' }
// ...
```

### Set the opacity ( from 0 to 100 ) to any shadow color
Now you can add opacity values to any shadow color, by adding a number between 0 and 100 to the end of the color name separated with a slash.

```xml
<View class="w-16 h-16 bg-white shadow-lg rounded-2xl shadow-indigo-500/75" />
```

```css
// ...
// Shadow Colors with opacity values
'.shadow-indigo-500/75': { viewShadowColor: '#bf6366f1' }
// ...
```

### Set arbitrary values to shadow colors
You can also set arbitrary values to shadow colors, by adding `shadow-(hex-rgb-or-rgba-value)`.

```xml
<View class="w-16 h-16 bg-white shadow-lg rounded-2xl shadow-(#ce10cc)" />

<View class="w-16 h-16 bg-white shadow-lg rounded-2xl shadow-(rgba(120,200,250,0.5))" />
```

```css
// ...
// Styles with arbitrary values
'.shadow-(#ce10cc)': { viewShadowColor: '#ce10cc' }
'.shadow-(rgba(120,200,250,0.5))': { viewShadowColor: 'rgba(120,200,250,0.5' }
// ...
```