purgetss 3.0.3 → 3.0.4

package/README.md

@@ -22,17 +22,18 @@
 - Provides more than 6000 [Tailwind-like utility classes](https://tailwindcss.com/) ready to use in your projects.
 - Creates a clean `app.tss` file with only the classes used in your project by parsing all your XML files.
 - You can customize any of the default classes through a simple configuration file, or you can create new *just-in-time* classes with arbitrary values within the `Views`.
-- You can easily use Font Awesome, Material Design, Lineicons, Boxicons and Framework7-Icons fonts in `Buttons` and `Labels`.
+- You can easily use Font Awesome, Material Design, Lineicons, Boxicons, Tabler Icons and Framework7-Icons fonts in `Buttons` and `Labels`.
 - Includes an Animation module to apply a 2D Matrix animation or transformation to any element or to an `Array` of elements.
 - Includes a simple two-dimensional Grid System to align and distribute elements in your views.
 
 ## List of available classes
 - [tailwind.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/tailwind.tss)
-- [lineicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/lineicons.tss)
 - [boxicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/boxicons.tss)
 - [fontawesome.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/fontawesome.tss)
 - [framework7icons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/framework7icons.tss)
+- [lineicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/lineicons.tss)
 - [materialdesignicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/materialdesignicons.tss)
+- [tablericons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/tablericons.tss)
 - [Your own custom styles](https://github.com/macCesar/purgeTSS/blob/master/docs/configuring-guide.md)
 
 # IMPORTANT NOTICE!!!
@@ -205,6 +206,7 @@ You can customize the following properties:
 - Opacity
 - Padding
 - Placeholder Colors
+- Shadow Colors
 - Text Colors
 - Tint Color
 - Width scale
@@ -268,7 +270,7 @@ Use **`purgetss module`** command to install the `purgetss.ui.js` module in your
 If you want to create a new Alloy Project with `purgetss` ready to go, use the `create` command.
 
 ```bash
-> purgetss create 'Name of the Project' [--vendor="fontawesome, materialdesign, lineicons, boxicons, framework7"]
+> purgetss create 'Name of the Project' [--vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"]
 
 # alias:
 > purgetss c 'Name of the Project' [-v=fa,md,li,bx,f7]
@@ -309,7 +311,7 @@ When you run `purgetss create 'Name of the Project'` it will execute the followi
 > purgetss f
 ```
 
-Use this command to copy the free versions of [Font Awesome](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free/webfonts), [Material Design Icons](https://github.com/google/material-design-icons), [LineIcons](https://lineicons.com/icons/?type=free), [Boxicons](https://boxicons.com) and [Framework7 Icons](https://framework7.io/icons/) fonts into your `app/assets/fonts` folder. With their names fixed to work in iOS or Android.
+Use this command to copy the free versions of [Boxicons](https://boxicons.com), [Font Awesome](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free/webfonts), [Framework7 Icons](https://framework7.io/icons/), [LineIcons](https://lineicons.com/icons/?type=free), [Material Design Icons](https://github.com/google/material-design-icons) and [Tabler Icons](https://tabler-icons.io) Fonts into your `app/assets/fonts` folder. With their names fixed to work in iOS or Android.
 
 > boxicons.ttf
 >
@@ -323,6 +325,8 @@ Use this command to copy the free versions of [Font Awesome](https://github.com/
 >
 > LineIcons.ttf
 >
+> tablericons.ttf
+>
 > MaterialIcons-Regular.ttf
 >
 > MaterialIconsOutlined-Regular.otf
@@ -373,6 +377,11 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
       <Label class="mt-2 text-gray-700" text="Framework7-Icons" />
       <Label class="text-xl text-blue-500 f7 f7-house" />
       <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded f7 f7-house" />
+
+      <!-- Tabler-Icons -->
+      <Label class="mt-2 text-gray-700" text="Tabler-Icons" />
+      <Label class="text-xl text-blue-500 ti ti-home" />
+      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded ti ti-home" />
     </View>
   </Window>
 </Alloy>
@@ -418,19 +427,23 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
 // Framework7 styles
 '.f7': { font: { fontFamily: 'Framework7-Icons' } }
 '.f7-house': { text: 'house', title: 'house' }
+
+// Tabler Icons styles
+'.ti': { font: { fontFamily: 'tabler-icons' } }
+'.ti-home': { text: '\ueac1', title: '\ueac1' }
 ```
 
 ## Result
-<img src="https://raw.githubusercontent.com/macCesar/purgeTSS/master/assets/images/icon-fonts.png" width="375" alt="iOS Screen - Icon Fonts">
+<img src="https://raw.githubusercontent.com/macCesar/purgeTSS/master/assets/images/icon-fonts-tabler.png" width="375" alt="iOS Screen - Icon Fonts">
 
 ### Copying specific font vendors
 Use any of the following arguments to copy specific vendors:
 
 ```bash
-> purgetss fonts --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7"
+> purgetss fonts --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"
 
 # alias:
-> purgetss f -v=fa,md,li,bx,f7
+> purgetss f -v=fa,md,li,bx,f7,ti
 ```
 
 Available aliases:
@@ -439,17 +452,18 @@ Available aliases:
 - fa, font, fontawesome = Font Awesome Icons
 - md, material, materialdesign = Material Design Icons
 - f7, framework, framework7 = Framework7 Icons
+- ti, tablericons, tabler = Tabler Icons
 
 ### Copying corresponding CommonJS Modules
 You can use the `--modules` flag to copy the corresponding CommonJS modules into `./app/lib/` folder.
 
 ```bash
 > purgetss fonts --modules
-> purgetss fonts --modules --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7"
+> purgetss fonts --modules --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"
 
 # alias:
 > purgetss f -m
-> purgetss f -m -v=fa,md,li,bx,f7
+> purgetss f -m -v=fa,md,li,bx,f7,ti
 ```
 
 Each library contains a CommonJS module exposing the UniCode strings for Font Awesome icons, Material Design Icons, Line Icons Boxicons and Framework7-Icons fonts.
@@ -459,6 +473,7 @@ All prefixes are stripped out from their class names and are camelCased, for exa
 - **Line Icons**: `lni-flag` becomes `flag`
 - **Font Awesome**: `fa-flag` becomes `flag`
 - **Material Design Icons**: `md-flag` becomes `flag`
+- **Tabler Icons** `ti-flag` becomes `flag` or `ti-cloud-download` becomes `cloudDownload`.
 - **Framework7 Icons** `f7-alarm_fill` becomes `alarmFill` or `f7-clock_fill` becomes `clockFill`.
 - **boxicons** have three sets of icons in the same font file: Regular, Solid and Logos, so we need to keep their prefixes:
 

package/bin/purgetss

@@ -35,7 +35,7 @@ program
 	.alias('c')
 	.description('Creates a new Alloy Project with `purgetss` already configured.')
 	.help('Creates a new Alloy Project with `purgetss` already configured.')
-	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons')
+	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons')
 	.argument('<name>', 'The name of the project')
 	.action((args, options, logger) => {
 		purgetss.create(args, options);
@@ -64,8 +64,8 @@ program
 	.command('fonts')
 	.alias('f')
 	.description('Copy Font Awesome icons, Material Design Icons, LineIcons, Boxicons and Framework7-Icons Font files into your project')
-	.help('Command to copy the Free versions of:\n\n   • Font Awesome Icons ( Brands, Regular, Solid )\n   • Material Design Icons\n   • LineIcons\n   • Boxicons\n   • Framework7 Icons\n\nInto your projects’s app/assets/fonts/ folder.\n\nWith their names fixed to work with your app whether it is for iOS or for Android.')
-	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons')
+	.help('Command to copy the Free versions of:\n\n   • Font Awesome Icons ( Brands, Regular, Solid )\n   • Material Design Icons\n   • LineIcons\n   • Boxicons\n   • Framework7 Icons\n   • Tabler Icons\n\nInto your projects’s app/assets/fonts/ folder.\n\nWith their names fixed to work with your app whether it is for iOS or for Android.')
+	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons')
 	.option('-m, --modules', 'Use the `--modules` option to also copy the corresponding CommonJS module into `./app/lib/` folder.')
 	.action((args, options, logger) => {
 		purgetss.copyFonts(options);

package/dist/boxicons.tss

@@ -3,6 +3,7 @@
 
 // Font Families
 '.bx': { font: { fontFamily: 'boxicons' } }
+'.bxi': { font: { fontFamily: 'boxicons' } }
 '.boxicons': { font: { fontFamily: 'boxicons' } }
 
 // Font Sizes

package/dist/framework7icons.tss

@@ -3,7 +3,7 @@
 
 // Font Families
 '.f7': { font: { fontFamily: 'Framework7-Icons' } }
-'.f7-icons': { font: { fontFamily: 'Framework7-Icons' } }
+'.f7i': { font: { fontFamily: 'Framework7-Icons' } }
 '.framework7': { font: { fontFamily: 'Framework7-Icons' } }
 
 // Font Sizes

package/dist/lineicons.tss

@@ -2,6 +2,7 @@
 // License - https://lineicons.com/license/
 
 // Font Families
+'.li': { font: { fontFamily: 'LineIcons' } }
 '.lni': { font: { fontFamily: 'LineIcons' } }
 '.lineicons': { font: { fontFamily: 'LineIcons' } }
 

package/dist/tablericons.tss

@@ -3,8 +3,8 @@
 
 // Font Families
 '.ti': { font: { fontFamily: 'tabler-icons' } }
+'.tabler': { font: { fontFamily: 'tabler-icons' } }
 '.tablericons': { font: { fontFamily: 'tabler-icons' } }
-'.tabler-icons': { font: { fontFamily: 'tabler-icons' } }
 
 // Font Icons
 // To use tabler-icons in Buttons AND Labels each class sets 'text' and 'title' properties

package/dist/tailwind.tss

@@ -1,4 +1,4 @@
-// Tailwind CSS v3.0.0: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
+// Tailwind CSS v3.0.7: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
 // Created by Adam Wathan ( https://twitter.com/adamwathan ).
 
 // Custom Styles and Resets
@@ -1477,6 +1477,18 @@
 '.enable-bounce': { disableBounce: false }
 '.disable-bounce': { disableBounce: true }
 
+// cacheSize Property
+'.cache-size-1': { cacheSize: 1 }
+'.cache-size-2': { cacheSize: 2 }
+'.cache-size-3': { cacheSize: 3 }
+'.cache-size-4': { cacheSize: 4 }
+'.cache-size-5': { cacheSize: 5 }
+'.cache-size-6': { cacheSize: 6 }
+'.cache-size-7': { cacheSize: 7 }
+'.cache-size-8': { cacheSize: 8 }
+'.cache-size-9': { cacheSize: 9 }
+'.cache-size-10': { cacheSize: 10 }
+
 // clipMode Property
 '.clip-enabled[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_ENABLED }
 '.clip-disabled[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_DISABLED }
@@ -2663,6 +2675,16 @@
 '.bg-linear-to-l': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }
 '.bg-linear-to-tl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '100%' }, backfillStart: true } }
 
+'.bg-gradient': { backgroundGradient: { type: 'linear', startPoint: { x: '50%', y: '100%' }, endPoint: { x: '50%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-t': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '0%', y: '100%' }, backfillStart: true } }
+'.bg-gradient-to-tr': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '0%' }, endPoint: { x: '0%', y: '100%' }, backfillStart: true } }
+'.bg-gradient-to-r': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '0%' }, endPoint: { x: '0%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-br': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '100%' }, endPoint: { x: '0%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-b': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '100%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-bl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '100%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-l': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }
+'.bg-gradient-to-tl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '100%' }, backfillStart: true } }
+
 // Margin Property
 '.m-0': { top: 0, right: 0, bottom: 0, left: 0 }
 '.m-1': { top: 4, right: 4, bottom: 4, left: 4 }

package/docs/whats-new/v2.5.0.md

@@ -1,6 +1,6 @@
 # What's new in v2.5.0
 - [What's new in v2.5.0](#whats-new-in-v250)
-  - [Breaking changes & new utilities](#braking-changes--new-utilities)
+  - [Breaking changes & new utilities](#breaking-changes--new-utilities)
   - [Grid System](#grid-system)
     - [Column grid](#column-grid)
     - [Row grid](#row-grid)
@@ -216,10 +216,10 @@ You can create more complex animations by combining properties to different `sta
   <Window class="keep-screen-on">
     <View class="vertical">
       <Button class="w-48 mt-1 bg-purple-500 rounded ios:mt-16 text-purple-50" ios:onSingletap="do3Squares" android:onClick="do3Squares" title="3 Squares"/>
-      <Button class="w-48 mt-1 mt-2 bg-purple-500 rounded text-purple-50" ios:onSingletap="doChangeColors" android:onClick="doChangeColors" title="Toggle Colors"/>
-      <Button class="w-48 mt-1 mt-2 bg-purple-500 rounded text-purple-50" ios:onSingletap="doRetweet" android:onClick="doRetweet" title="Toggle Re-Tweet"/>
+      <Button class="w-48 mt-2 bg-purple-500 rounded text-purple-50" ios:onSingletap="doChangeColors" android:onClick="doChangeColors" title="Toggle Colors"/>
+      <Button class="w-48 mt-2 bg-purple-500 rounded text-purple-50" ios:onSingletap="doRetweet" android:onClick="doRetweet" title="Toggle Re-Tweet"/>
 
-      <View id="squares" class="w-screen mt-1 mt-10 vertical">
+      <View id="squares" class="w-screen mt-10 vertical">
         <View id="aquare1" class="bg-blue-700 w-28 h-28 rounded-xl" />
         <View id="aquare2" class="mt-4 bg-blue-700 w-28 h-28 rounded-xl" />
         <View id="aquare3" class="mt-4 bg-blue-700 w-28 h-28 rounded-xl" />
@@ -229,15 +229,15 @@ You can create more complex animations by combining properties to different `sta
     <View id="square3" class="mt-8 bg-blue-500 w-14 h-14 rounded-xl" ios:onSingletap="doTransparency" android:onClick="doTransparency" />
 
     <View id="retweetView" class="w-screen h-48 bg-gray-800 vertical -mb-52 rounded-2xl" ios:onSingletap="doRetweet" android:onClick="doRetweet">
-      <View class="w-8 h-1 mt-4 bg-blueGray-700" />
+      <View class="w-8 h-1 mt-4 bg-slate-700" />
 
       <View class="mx-4 mt-4 horizontal">
-        <Label class="text-xl text-blueGray-500 fas fa-retweet w-7" />
+        <Label class="text-xl text-slate-500 fas fa-retweet w-7" />
         <Label class="ml-2 text-xl text-left text-white" text="Re-Tweet" />
       </View>
 
       <View class="mx-4 mt-4 horizontal">
-        <Label class="text-xl text-blueGray-500 fas fa-pencil-alt w-7" />
+        <Label class="text-xl text-slate-500 fas fa-pencil-alt w-7" />
         <Label class="ml-2 text-xl text-left text-white" text="Quote Tweet" />
       </View>
     </View>

package/docs/whats-new/v3.0.0.md

@@ -0,0 +1,33 @@
+# What's new in v3.0.0
+- [What's new in v3.0.0](#whats-new-in-v300)
+  - [PurgeTSS now uses Tailwind CSS v3.0.0](#purgetss-now-uses-tailwind-css-v300)
+  - [tailwindUI plug-in is no longer required](#tailwindui-plug-in-is-no-longer-required)
+  - [Future plans](#future-plans)
+
+## PurgeTSS now uses Tailwind CSS v3.0.0
+With the release of [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3), PurgeTSS now uses the revamped colors like cyan, rose, fuchsia, and lime. Check out the [color palette reference](https://tailwindcss.com/docs/customizing-colors) to learn more.
+
+## tailwindUI plug-in is no longer required
+Because of this, there are some minor breaking changes:
+
+- These colors are no longer available: lightBlue, warmGray, trueGray, coolGray and blueGray. They are replaced with: sky, stone, neutral, gray and slate respectively.
+- Two spacing values are removed: `spacing.13` and `spacing.15`, which means styles for Heights, Widths, Margins and Paddings like `w-13` , `h-13`, `m-15` or `p-15` ( and any other variant like `mt-13`  or `px-13` ) are no longer generated.
+- You can always extend the `spacing` key in the theme section of your `purgetss/config.js` file to add the missing values:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        '13': '3.25rem',
+        '15': '3.75rem',
+      }
+    }
+  }
+}
+```
+
+## Future plans
+In future updates, we will be adding some of the new styles of TW 3, like [**Box Shadow Color**](https://tailwindcss.com/docs/box-shadow-color).
+
+And we will try to match even more Titanium properties.

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

@@ -8,7 +8,7 @@
     - [Set arbitrary values to shadow colors](#set-arbitrary-values-to-shadow-colors)
 
 ## Even faster purging time
-**Up to 2.5 faster than v 2!** On a project with more than 100 XML files, purging time was reduced from 350 ms down to 140 ms.
+**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.
@@ -25,7 +25,7 @@ A set of over 1400 free MIT-licensed [high-quality icons](https://tabler-icons.i
 // ...
 ```
 
-[<img src="https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png">](https://github.com/tabler/tabler-icons#preview)
+[<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.
@@ -61,13 +61,13 @@ You can also set arbitrary values to shadow colors, by adding `shadow-(hex-rgb-o
 ```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)" />
+<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' }
+'.shadow-(rgba(120,200,250,0.5))': { viewShadowColor: 'rgba(120,200,250,0.5' }
 // ...
 ```

package/docs/whats-new/v3.0.4.md

@@ -0,0 +1,243 @@
+# What's new in v3.0.4
+- [What's new in v3.0.4](#whats-new-in-v304)
+  - [More properties with arbitrary values](#more-properties-with-arbitrary-values)
+    - [List of all Color Properties](#list-of-all-color-properties)
+    - [List of Size or Dimension Properties](#list-of-size-or-dimension-properties)
+    - [Other Properties](#other-properties)
+  - [Color opacity modifiers](#color-opacity-modifiers)
+    - [In your XML files](#in-your-xml-files)
+    - [In the `apply` directive](#in-the-apply-directive)
+    - [List of color properties whose opacity can be adjusted](#list-of-color-properties-whose-opacity-can-be-adjusted)
+
+## More properties with arbitrary values
+Now you can set arbitrary color values **to ALL available color properties**, using `hex`, `rgb` or `rgba` color values.
+
+You can set them directly in your `xml` files or in your `config.js` file.
+
+```xml
+<Alloy>
+  <Window class="from-(#243c5a) to-(#80243c5a)">
+    <Label class="text-center w-11/12 h-16 bg-(rgba(100,200,50,0.5)) text-(rgb(100,200,50))" text="Green Label" />
+  </Window>
+</Alloy>
+```
+
+```css
+// Tailwind styles
+'Window': { backgroundColor: '#ffffff' }
+'.h-16': { height: 64 }
+'.text-center': { textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }
+'.w-11/12': { width: '91.666667%' }
+
+// Styles with arbitrary values
+'.bg-(rgba(100,200,50,0.5))': { backgroundColor: 'rgba(100,200,50,0.5)' }
+'.from-(#243c5a)': { backgroundGradient: { colors: [ '#00243c5a', '#243c5a' ] } }
+'.text-(rgb(100,200,50))': { color: 'rgb(100,200,50)' }
+'.to-(#80243c5a)': { backgroundGradient: { colors: [ '#80243c5a' ] } }
+```
+
+### List of all Color Properties
+- **Active Tint Color**
+  - active-tint-(*`hex-rgb-or-rgba-value`*)
+- **Active Title Color**
+  - active-title-(*`hex-rgb-or-rgba-value`*)
+- **Background Color**
+  - bg-(*`hex-rgb-or-rgba-value`*)
+- **Background Gradient**
+  - from-(*`hex-rgb-or-rgba-value`*)
+  - to-(*`hex-rgb-or-rgba-value`*)
+- **Background Selected Color**
+  - bg-selected-(*`hex-rgb-or-rgba-value`*)
+- **Bar Color**
+  - bar-(*`hex-rgb-or-rgba-value`*)
+- **Border Color**
+  - border-color-(*`hex-rgb-or-rgba-value`*)
+- **Color**
+  - text-color-(*`hex-rgb-or-rgba-value`*)
+- **Current Page Indicator Color**
+  - current-page-(*`hex-rgb-or-rgba-value`*)
+- **Hint Text Color**
+  - placeholder-(*`hex-rgb-or-rgba-value`*)
+- **Nav Tint Color**
+  - nav-tint-(*`hex-rgb-or-rgba-value`*)
+- **Page Indicator Color**
+  - page-(*`hex-rgb-or-rgba-value`*)
+- **Paging Control Color**
+  - paging-(*`hex-rgb-or-rgba-value`*)
+- **Tabs Background Color**
+  - tabs-bg-(*`hex-rgb-or-rgba-value`*)
+- **Tint Color**
+  - tint-(*`hex-rgb-or-rgba-value`*)
+- **Title Color**
+  - title-(*`hex-rgb-or-rgba-value`*)
+- **Touch Feedback Color**
+  - feedback-(*`hex-rgb-or-rgba-value`*)
+- **View Shadow Color**
+  - shadow-(*`hex-rgb-or-rgba-value`*)
+
+### List of Size or Dimension Properties
+- **Border Width**
+  - border-width-(*`any-size-value-and-unit`*)
+- **Content Height**
+  - content-h-(*`any-size-value-and-unit`*)
+- **Content Width**
+  - content-w-(*`any-size-value-and-unit`*)
+- **Content Width & Content Height**
+  - content-(*`any-size-value-and-unit`*)
+- **Font Size**
+  - text-size-(*`any-size-value-and-unit`*)
+- **Height**
+  - grid-rows-(*`any-size-value-and-unit`*)
+  - h-(*`any-size-value-and-unit`*)
+- **Width**
+  - grid-cols-(*`any-size-value-and-unit`*)
+  - w-(*`any-size-value-and-unit`*)
+- **Top**
+  - mt-(*`any-size-value-and-unit`*)
+  - top-(*`any-size-value-and-unit`*)
+- **Right**
+  - mr-(*`any-size-value-and-unit`*)
+  - right-(*`any-size-value-and-unit`*)
+- **Bottom**
+  - bottom-(*`any-size-value-and-unit`*)
+  - mb-(*`any-size-value-and-unit`*)
+- **Left**
+  - left-(*`any-size-value-and-unit`*)
+  - ml-(*`any-size-value-and-unit`*)
+- **Top and Bottom**
+  - my-(*`any-size-value-and-unit`*)
+- **Left and Right**
+  - mx-(*`any-size-value-and-unit`*)
+- **Top, Right, Bottom, Left**
+  - m-(*`any-size-value-and-unit`*)
+- **Padding Top**
+  - pt-(*`any-size-value-and-unit`*)
+- **Padding Right**
+  - pr-(*`any-size-value-and-unit`*)
+- **Padding Bottom**
+  - pb-(*`any-size-value-and-unit`*)
+- **Padding Left**
+  - pl-(*`any-size-value-and-unit`*)
+- **Padding Top and Bottom**
+  - py-(*`any-size-value-and-unit`*)
+- **Padding Left and Right**
+  - px-(*`any-size-value-and-unit`*)
+- **Padding Top, Right, Bottom and Left**
+  - p-(*`any-size-value-and-unit`*)
+
+### Other Properties
+- **Anchor Point**
+  - origin-(*`x-and-y-coordinates`*)
+- **Border Radius**
+  - rounded-(*`number-value`*)
+- **Cache Size**
+  - cache-size-(*`number-value`*)
+- **Delay**
+  - delay-(*`number-value`*)
+- **Duration**
+  - duration-(*`number-value`*)
+- **Font Weight**
+  - font-(*`valid-font-font-weight-value`*)
+- **Max Zoom Scale**
+  - max-scale-(*`number-value`*)
+- **Min Zoom Scale**
+  - min-scale-(*`number-value`*)
+- **Opacity**
+  - opacity-(*`number-value`*)
+- **Paging Control Alpha**
+  - paging-(*`alpha-value-from-0-to-1`*)
+- **Repeat**
+  - repeat-(*`number-value`*)
+- **Rotate**
+  - rotate-(*`number-value`*)
+
+
+## Color opacity modifiers
+Now you can add a **color opacity modifier** to any of the available color properties, by adding an **opacity-value** between 0 and 100 to the end of the color name separated with a slash.
+
+### In your XML files
+
+```xml
+<Label class="w-11/12 h-8 text-center bg-sky-500/50 text-purple-900/75">My Button</Label>
+```
+
+```css
+// Tailwind styles
+'Window': { backgroundColor: '#ffffff' }
+'.h-8': { height: 32 }
+'.text-center': { textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }
+'.w-11/12': { width: '91.666667%' }
+
+// Styles with color opacity modifiers
+'.bg-sky-500/50': { backgroundColor: '#800ea5e9' }
+'.text-purple-900/75': { color: '#bf581c87' }
+```
+
+### In the `apply` directive
+You can also use color opacity modifiers in the `apply` directive in your `config.js` file.
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#ce10cc'
+      }
+    },
+    '.main-banner': {
+      apply: [
+        'bg-primary/35',
+        'border-primary/75'
+      ]
+    }
+  }
+}
+```
+
+
+```css
+// Custom Styles and Resets
+'.main-banner': { backgroundColor: '#59ce10cc', borderColor: '#bfce10cc' }
+
+// backgroundColor Property
+'.bg-primary': { backgroundColor: '#ce10cc' }
+```
+
+### List of color properties whose opacity can be adjusted
+
+- **Active Tint Color**
+  - active-tint-{color}/opacity-value
+- **Active Title Color**
+  - active-title-{color}/opacity-value
+- **Background Color**
+  - bg-{color}/opacity-value
+- **Background Gradient**
+  - from-{color}/opacity-value
+  - to-{color}/opacity-value
+- **Background Selected Color**
+  - bg-selected-{color}/opacity-value
+- **Bar Color**
+  - bar-{color}/opacity-value
+- **Border Color**
+  - border-{color}/opacity-value
+- **Color**
+  - text-{color}/opacity-value
+- **Current Page Indicator Color**
+  - current-page-{color}/opacity-value
+- **Hint Text Color**
+  - placeholder-{color}/opacity-value
+- **Nav Tint Color**
+  - nav-tint-{color}/opacity-value
+- **Page Indicator Color**
+  - page-{color}/opacity-value
+- **Paging Control Color**
+  - paging-{color}/opacity-value
+- **Tabs Background Color**
+  - tabs-bg-{color}/opacity-value
+- **Tint Color**
+  - tint-{color}/opacity-value
+  - title-{color}/opacity-value
+- **Touch Feedback Color**
+  - feedback-{color}/opacity-value
+- **View Shadow Color**
+  - shadow-{color}/opacity-value

package/index.js

@@ -779,6 +779,8 @@ function buildCustomTailwind(message = 'file created!') {
 
 	configFile.theme.currentPageIndicatorColor = combineKeys(configFile.theme, base.colors, 'currentPageIndicatorColor', true);
 
+	configFile.theme.cacheSize = {};
+
 	// pagingControlHeight
 	delete base.height['fit'];
 	delete base.height['max'];
@@ -998,6 +1000,7 @@ function buildCustomTailwindClasses(key, value) {
 		case 'autocapitalization': return helpers.autocapitalization();
 		case 'autoLink': return helpers.autoLink();
 		case 'borderStyle': return helpers.borderStyle();
+		case 'cacheSize': return helpers.cacheSize();
 		case 'editable': return helpers.editable();
 		case 'ellipsize': return helpers.ellipsize();
 		case 'enableCopy': return helpers.enableCopy();
@@ -1222,8 +1225,8 @@ function purgeTailwind(uniqueClasses) {
 
 	(fs.existsSync(customTailwindFile)) ? logger.info('Purging', chalk.yellow('Custom Tailwind'), 'styles...') : logger.info('Purging Default Tailwind styles...');
 
-	let opacityValues = [];
 	let cleanUniqueClasses = [];
+	let classesWithOpacityValues = [];
 	let arbitraryValues = '\n// Styles with arbitrary values\n';
 
 	uniqueClasses.forEach((className, index) => {
@@ -1232,13 +1235,14 @@ function purgeTailwind(uniqueClasses) {
 		if (cleanClassName.includes('(')) {
 			let line = formatArbitraryValues(cleanClassName);
 			if (line) arbitraryValues += helpers.checkPlatformAndDevice(line, className);
-		} else if (cleanClassName.includes('shadow-') && cleanClassName.includes('/')) {
+		} else if (helpers.checkColorClasses(cleanClassName)) {
+			// Set opacity to color properties
 			let decimalValue = cleanClassName.split('/')[1];
 			let transparency = Math.round(decimalValue * 255 / 100).toString(16);
 			if (transparency.length === 1) transparency = '0' + transparency;
-			let originalClass = uniqueClasses[index];
+			let classNameWithTransparency = uniqueClasses[index];
 			let className = cleanClassName.substring(0, cleanClassName.lastIndexOf('/'));
-			opacityValues.push({ decimalValue, transparency, originalClass, className });
+			classesWithOpacityValues.push({ decimalValue, transparency, className, classNameWithTransparency });
 		} else {
 			cleanUniqueClasses.push(className);
 		}
@@ -1294,19 +1298,25 @@ function purgeTailwind(uniqueClasses) {
 		}
 	});
 
-	// add opacity values
-	if (opacityValues.length > 0) {
-		purgedClasses += '\n// Shadow Colors with opacity values\n';
-		opacityValues.forEach(opacityValue => {
-			let opacityIndex = _.findIndex(tailwindClasses, line => line.includes(opacityValue.className));
+	// Styles with color opacity modifiers
+	if (classesWithOpacityValues.length > 0) {
+		purgedClasses += '\n// Styles with color opacity modifiers\n';
+		classesWithOpacityValues.forEach(opacityValue => {
+			let opacityIndex = _.findIndex(tailwindClasses, line => line.startsWith(`'.${opacityValue.className}`));
 
 			if (opacityIndex > -1) {
-				let defaultHexValue = tailwindClasses[opacityIndex].match(/\#[0-9a-f]{6}/i)[0];
+				let defaultHexValue;
+				if (tailwindClasses[opacityIndex].includes('from')) {
+					defaultHexValue = tailwindClasses[opacityIndex].match(/\#[0-9a-f]{6}/g)[1];
+				} else {
+					defaultHexValue = tailwindClasses[opacityIndex].match(/\#[0-9a-f]{6}/i)[0];
+				}
+
 				let classWithoutDecimalOpacity = `${tailwindClasses[opacityIndex].replace(defaultHexValue, `#${opacityValue.transparency}${defaultHexValue.substring(1)}`)}`;
 				let defaultTextValue = tailwindClasses[opacityIndex].match(/'[^']*'/i)[0];
 				defaultTextValue = defaultTextValue.substring(1, defaultTextValue.length);
 				let finalClassName = `${classWithoutDecimalOpacity.replace(defaultTextValue, `.${defaultTextValue.substring(1, defaultTextValue.length - 1)}/${opacityValue.decimalValue}'`)}`;
-				purgedClasses += helpers.checkPlatformAndDevice(finalClassName, opacityValue.originalClass);
+				purgedClasses += helpers.checkPlatformAndDevice(finalClassName, opacityValue.classNameWithTransparency);
 			}
 		});
 	}
@@ -1323,41 +1333,44 @@ function cleanClassNameFn(className) {
 
 const arbitraryValuesTable = {
 	// Check if they are really needed
-	'font': '{ fontWeight: {value} }',
-	'max-scale': '{ maxZoomScale: {value} }',
-	'min-scale': '{ minZoomScale: {value} }',
-	'content-w': '{ contentWidth: {value} }',
-	'content-h': '{ contentHeight: {value} }',
-	// 'bg-selected': '{ backgroundSelectedColor: {value} }',
-	'content': '{ contentWidth: {value}, contentHeight: {value} }',
-	// 'shadow': '{ viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: {value} }',
-
-	'anchorPoint': '{ anchorPoint: { x: {value}, y: {value1} } }',
+	'active-tint': '{ activeTintColor: {value} }',
+	'active-title': '{ activeTitleColor: {value} }',
+	'bar': '{ barColor: {value} }',
+	'bg-selected': '{ backgroundSelectedColor: {value} }',
 	'bg': '{ backgroundColor: {value} }',
 	'border-color': '{ borderColor: {value} }',
 	'border-width': '{ borderWidth: {value} }',
 	'bottom': '{ bottom: {value} }',
+	'cache-size': '{ cacheSize: {value} }',
+	'content-h': '{ contentHeight: {value} }',
+	'content-w': '{ contentWidth: {value} }',
+	'content': '{ contentWidth: {value}, contentHeight: {value} }',
+	'current-page': '{ currentPageIndicatorColor: {value} }',
 	'delay': '{ delay: {value} }',
 	'duration': '{ duration: {value} }',
 	'feedback': '{ touchFeedback: true, touchFeedbackColor: {value} }',
+	'font': '{ fontWeight: {value} }',
 	'from': '{ backgroundGradient: { colors: [ {value1}, {value} ] } }',
+	'grid-cols': '{ width: Alloy.Globals.cols_{value} }',
+	'grid-rows': '{ height: Alloy.Globals.rows_{value} }',
 	'h': '{ height: {value}}',
 	'left': '{ left: {value} }',
 	'm': '{ top: {value}, right: {value}, bottom: {value}, left: {value} }',
+	'max-scale': '{ maxZoomScale: {value} }',
 	'mb': '{ bottom: {value} }',
+	'min-scale': '{ minZoomScale: {value} }',
 	'ml': '{ left: {value} }',
 	'mr': '{ right: {value} }',
 	'mt': '{ top: {value} }',
 	'mx': '{ right: {value}, left: {value} }',
 	'my': '{ top: {value}, bottom: {value} }',
+	'nav-tint': '{ navTintColor: {value} }',
 	'opacity': '{ opacity: {value} }',
-
-	'page': '{ pageIndicatorColor: {value} }',
-	'paging': '{ pagingControlColor: {value} }',
-	'cache-size': '{ cacheSize: {value} }',
-
-	'current-page': '{ currentPageIndicatorColor: {value} }',
+	'origin': '{ anchorPoint: { x: {value}, y: {value1} } }',
 	'p': '{ padding: { top: {value}, right: {value}, bottom: {value}, left: {value} } }',
+	'page': '{ pageIndicatorColor: {value} }',
+	'paging-alpha': '{ pagingControlAlpha: {value} }',
+	'paging-color': '{ pagingControlColor: {value} }',
 	'pb': '{ padding: { bottom: {value} } }',
 	'pl': '{ padding: { left: {value} } }',
 	'placeholder': '{ hintTextColor: {value} }',
@@ -1370,11 +1383,11 @@ const arbitraryValuesTable = {
 	'rotate': '{ rotate: {value} }',
 	'rounded': '{ borderRadius: {value} }',
 	'shadow': '{ viewShadowColor: {value} }',
+	'tabs-bg': '{ tabsBackgroundColor: {value} }',
 	'text-color': '{ color: {value} }',
 	'text-size': '{ font: { fontSize: {value} } }',
 	'tint': '{ tintColor: {value} }',
-	'grid-col': '{ width: Alloy.Globals.cols_{value} }',
-	'grid-row': '{ height: Alloy.Globals.rows_{value} }',
+	'title': '{ titleColor: {value} }',
 	'to': '{ backgroundGradient: { colors: [ {value} ] } }',
 	'top': '{ top: {value} }',
 	'w': '{ width: {value} }'
@@ -1393,20 +1406,24 @@ function formatArbitraryValues(arbitraryValue) {
 		let value = splitedContent[1].match(/(?<=\().*(?=\))/).pop();
 
 		if (rule === 'text') {
-			rule = (value.includes('#')) ? 'text-color' : 'text-size';
+			rule = (value.includes('#') || value.includes('rgb')) ? 'text-color' : 'text-size';
 		}
 
 		if (rule === 'border') {
-			rule = (value.includes('#')) ? 'border-color' : 'border-width';
+			rule = (value.includes('#') || value.includes('rgb')) ? 'border-color' : 'border-width';
+		}
+
+		if (rule === 'paging') {
+			rule = (value.includes('#') || value.includes('rgb')) ? 'paging-color' : 'paging-alpha';
 		}
 
 		let properties = arbitraryValuesTable[rule];
 
 		if (rule === 'from') {
-			properties = _.replace(properties, new RegExp("{value1}", "g"), helpers.addTransparencyToHex(helpers.parseValue(value, sign)));
+			properties = _.replace(properties, new RegExp("{value1}", "g"), helpers.addTransparencyToHex(helpers.parseValue(value)));
 		}
 
-		if (rule === 'anchorPoint') {
+		if (rule === 'origin') {
 			// anchorPoint
 			let value1 = (value.includes(',')) ? value.split(',')[1] : value;
 

package/lib/build-tailwind.js

@@ -50,6 +50,7 @@ if (!fs.existsSync('./dist')) {
 	convertedStyles += helpers.borderStyle();
 	convertedStyles += helpers.borderWidth(defaultTheme.borderWidth);
 	convertedStyles += helpers.bounce();
+	convertedStyles += helpers.cacheSize();
 	convertedStyles += helpers.clipMode();
 	convertedStyles += helpers.currentPageIndicatorColor(combinedColors);
 	convertedStyles += helpers.displayCaps();

package/lib/helpers.js

@@ -75,6 +75,24 @@ function barColor(modifiersAndValues) {
 }
 exports.barColor = barColor;
 
+function cacheSize() {
+	let modifiersAndValues = {
+		1: 1,
+		2: 2,
+		3: 3,
+		4: 4,
+		5: 5,
+		6: 6,
+		7: 7,
+		8: 8,
+		9: 9,
+		10: 10,
+	};
+
+	return processModifiersAndProperties('cacheSize', { 'cache-size': '{ cacheSize: {value} }' }, modifiersAndValues);
+}
+exports.cacheSize = cacheSize;
+
 function tabsBackgroundColor(modifiersAndValues) {
 	return processModifiersAndProperties('tabsBackgroundColor', { 'tabs-bg': '{ tabsBackgroundColor: {value} }' }, modifiersAndValues);
 }
@@ -217,6 +235,18 @@ function linearGradient() {
 	convertedStyles += `'.bg-linear-to-l': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }\n`;
 	convertedStyles += `'.bg-linear-to-tl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '100%' }, backfillStart: true } }\n`;
 
+	convertedStyles += '\n';
+
+	convertedStyles += `'.bg-gradient': { backgroundGradient: { type: 'linear', startPoint: { x: '50%', y: '100%' }, endPoint: { x: '50%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-t': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '0%', y: '100%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-tr': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '0%' }, endPoint: { x: '0%', y: '100%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-r': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '0%' }, endPoint: { x: '0%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-br': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '100%' }, endPoint: { x: '0%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-b': { backgroundGradient: { type: 'linear', startPoint: { x: '100%', y: '100%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-bl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '100%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-l': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '0%' }, backfillStart: true } }\n`;
+	convertedStyles += `'.bg-gradient-to-tl': { backgroundGradient: { type: 'linear', startPoint: { x: '0%', y: '0%' }, endPoint: { x: '100%', y: '100%' }, backfillStart: true } }\n`;
+
 	return convertedStyles;
 }
 exports.linearGradient = linearGradient;
@@ -1194,6 +1224,7 @@ function applyProperties(twStyles) {
 
 		if (indexOfModifier !== -1) {
 			let compoundClasses = [];
+			let classesWithOpacityValues = [];
 			_.each([...value], searchClass => {
 				// let cleanClass = searchClass.replace('open:', '').replace('close:', '');
 				//! Needs to handle open, close and complete states...
@@ -1202,6 +1233,15 @@ function applyProperties(twStyles) {
 					if (theClass) {
 						compoundClasses.push(formatArbitraryValues(searchClass));
 					}
+					//! Process transparency values
+				} else if (checkColorClasses(searchClass)) {
+					// Set opacity to color properties
+					let decimalValue = searchClass.split('/')[1];
+					let transparency = Math.round(decimalValue * 255 / 100).toString(16);
+					if (transparency.length === 1) transparency = '0' + transparency;
+					let originalClass = searchClass;
+					let classNameWithTransparency = searchClass.substring(0, searchClass.lastIndexOf('/'));
+					classesWithOpacityValues.push({ decimalValue, transparency, originalClass, classNameWithTransparency });
 				} else {
 					let indexOfClass = findIndexOf(`'.${searchClass}': `, twStylesArray);
 
@@ -1214,6 +1254,28 @@ function applyProperties(twStyles) {
 				}
 			});
 
+			// Handle opacity values
+			if (classesWithOpacityValues.length > 0) {
+				classesWithOpacityValues.forEach(opacityValue => {
+					let opacityIndex = _.findIndex(twStylesArray, line => line.startsWith(`'.${opacityValue.classNameWithTransparency}`));
+					if (opacityIndex > -1) {
+						let defaultHexValue;
+						if (twStylesArray[opacityIndex].includes('from')) {
+							defaultHexValue = twStylesArray[opacityIndex].match(/\#[0-9a-f]{6}/g)[1];
+						} else {
+							defaultHexValue = twStylesArray[opacityIndex].match(/\#[0-9a-f]{6}/i)[0];
+						}
+
+						let classWithoutDecimalOpacity = `${twStylesArray[opacityIndex].replace(defaultHexValue, `#${opacityValue.transparency}${defaultHexValue.substring(1)}`)}`;
+						let defaultTextValue = twStylesArray[opacityIndex].match(/'[^']*'/i)[0];
+						compoundClasses.push(classWithoutDecimalOpacity
+							.replace(`${defaultTextValue}: `, '')
+							.replace(/{(.*)}/, '$1')
+							.trim());
+					}
+				});
+			}
+
 			twStylesArray[indexOfModifier] = _.replace(twStylesArray[indexOfModifier], new RegExp("{_applyProperties_}"), fixDuplicateKeys(compoundClasses).join(', '));
 		}
 	});
@@ -1222,6 +1284,31 @@ function applyProperties(twStyles) {
 }
 exports.applyProperties = applyProperties;
 
+function checkColorClasses(cleanClassName) {
+	return (
+		cleanClassName.startsWith('active-tint-') ||
+		cleanClassName.startsWith('active-title-') ||
+		cleanClassName.startsWith('bar-') ||
+		cleanClassName.startsWith('bg-') ||
+		cleanClassName.startsWith('bg-selected-') ||
+		cleanClassName.startsWith('border-') ||
+		cleanClassName.startsWith('current-page-') ||
+		cleanClassName.startsWith('feedback-') ||
+		cleanClassName.startsWith('from-') ||
+		cleanClassName.startsWith('nav-tint-') ||
+		cleanClassName.startsWith('page-') ||
+		cleanClassName.startsWith('paging-') ||
+		cleanClassName.startsWith('placeholder-') ||
+		cleanClassName.startsWith('shadow-') ||
+		cleanClassName.startsWith('tabs-bg-') ||
+		cleanClassName.startsWith('text-') ||
+		cleanClassName.startsWith('tint-') ||
+		cleanClassName.startsWith('title-') ||
+		cleanClassName.startsWith('to-')) &&
+		cleanClassName.includes('/');
+}
+exports.checkColorClasses = checkColorClasses;
+
 function findIndexOf(_substring, _array) {
 	return _array.findIndex(element => element.includes(_substring));
 }
@@ -1266,7 +1353,9 @@ function fixDuplicateKeys(compoundClasses) {
 		cleanedStyles.push(`font: { ${fontObject.sort().join(', ')} }`);
 	}
 
-	if (backgroundGradientObject.length === 2) {
+	if (backgroundGradientObject.length === 1) {
+		cleanedStyles.push(`backgroundGradient: { ${backgroundGradientObject} }`);
+	} else if (backgroundGradientObject.length === 2) {
 		let toColor = backgroundGradientObject[1].replace('colors: ', '').replace(/[\[\]']+/g, '').trim().split(',');
 		let fromToColors = backgroundGradientObject[0].replace('colors: ', '').replace(/[\[\]']+/g, '').trim().split(',');
 		fromToColors[0] = toColor[0];
@@ -1278,41 +1367,45 @@ function fixDuplicateKeys(compoundClasses) {
 
 const arbitraryValuesTable = {
 	// Check if they are really needed
-	'font': 'font: { fontWeight: {value} }',
-	'max-scale': 'maxZoomScale: {value}',
-	'min-scale': 'minZoomScale: {value}',
-	'content-w': 'contentWidth: {value}',
-	'content-h': 'contentHeight: {value}',
-	// 'bg-selected': 'backgroundSelectedColor: {value}',
-	'content': 'contentWidth: {value}, contentHeight: {value}',
-	// 'shadow': 'viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: {value}',
 
-	'anchorPoint': 'anchorPoint: { x: {value}, y: {value1}',
+	'active-tint': 'activeTintColor: {value}',
+	'active-title': 'activeTitleColor: {value}',
+	'bar': 'barColor: {value}',
+	'bg-selected': 'backgroundSelectedColor: {value}',
 	'bg': 'backgroundColor: {value}',
 	'border-color': 'borderColor: {value}',
 	'border-width': 'borderWidth: {value}',
 	'bottom': 'bottom: {value}',
+	'cache-size': 'cacheSize: {value}',
+	'content-h': 'contentHeight: {value}',
+	'content-w': 'contentWidth: {value}',
+	'content': 'contentWidth: {value}, contentHeight: {value}',
+	'current-page': 'currentPageIndicatorColor: {value}',
 	'delay': 'delay: {value}',
 	'duration': 'duration: {value}',
 	'feedback': 'touchFeedback: true, touchFeedbackColor: {value}',
+	'font': 'font: { fontWeight: {value} }',
 	'from': 'backgroundGradient: { colors: [ {value1}, {value} ] }',
+	'grid-cols': 'width: Alloy.Globals.cols_{value}',
+	'grid-rows': 'height: Alloy.Globals.rows_{value}',
 	'h': 'height: {value}',
 	'left': 'left: {value}',
 	'm': 'top: {value}, right: {value}, bottom: {value}, left: {value}',
+	'max-scale': 'maxZoomScale: {value}',
 	'mb': 'bottom: {value}',
+	'min-scale': 'minZoomScale: {value}',
 	'ml': 'left: {value}',
 	'mr': 'right: {value}',
 	'mt': 'top: {value}',
 	'mx': 'right: {value}, left: {value}',
 	'my': 'top: {value}, bottom: {value}',
+	'nav-tint': 'navTintColor: {value}',
 	'opacity': 'opacity: {value}',
-
-	'page': 'pageIndicatorColor: {value}',
-	'paging': 'pagingControlColor: {value}',
-	'cache-size': 'cacheSize: {value}',
-
-	'current-page': 'currentPageIndicatorColor: {value}',
+	'origin': 'anchorPoint: { x: {value}, y: {value1} }',
 	'p': 'padding: { top: {value}, right: {value}, bottom: {value}, left: {value} }',
+	'page': 'pageIndicatorColor: {value}',
+	'paging-alpha': 'pagingControlAlpha: {value}',
+	'paging-color': 'pagingControlColor: {value}',
 	'pb': 'padding: { bottom: {value} }',
 	'pl': 'padding: { left: {value} }',
 	'placeholder': 'hintTextColor: {value}',
@@ -1324,11 +1417,12 @@ const arbitraryValuesTable = {
 	'right': 'right: {value}',
 	'rotate': 'rotate: {value}',
 	'rounded': 'borderRadius: {value}',
+	'shadow': 'viewShadowColor: {value}',
+	'tabs-bg': 'tabsBackgroundColor: {value}',
 	'text-color': 'color: {value}',
 	'text-size': 'font: { fontSize: {value} }',
 	'tint': 'tintColor: {value}',
-	'grid-col': 'width: Alloy.Globals.cols_{value}',
-	'grid-row': 'height: Alloy.Globals.rows_{value}',
+	'title': 'titleColor: {value}',
 	'to': 'backgroundGradient: { colors: [ {value} ] }',
 	'top': 'top: {value}',
 	'w': 'width: {value}'
@@ -1347,20 +1441,24 @@ function formatArbitraryValues(arbitraryValue) {
 		let value = splitedContent[1].match(/(?<=\().*(?=\))/).pop();
 
 		if (rule === 'text') {
-			rule = (value.includes('#')) ? 'text-color' : 'text-size';
+			rule = (value.includes('#') || value.includes('rgb')) ? 'text-color' : 'text-size';
 		}
 
 		if (rule === 'border') {
-			rule = (value.includes('#')) ? 'border-color' : 'border-width';
+			rule = (value.includes('#') || value.includes('rgb')) ? 'border-color' : 'border-width';
+		}
+
+		if (rule === 'paging') {
+			rule = (value.includes('#') || value.includes('rgb')) ? 'paging-color' : 'paging-alpha';
 		}
 
 		let properties = arbitraryValuesTable[rule];
 
 		if (rule === 'from') {
-			properties = _.replace(properties, new RegExp("{value1}", "g"), addTransparencyToHex(parseValue(value, sign)));
+			properties = _.replace(properties, new RegExp("{value1}", "g"), addTransparencyToHex(parseValue(value)));
 		}
 
-		if (rule === 'anchorPoint') {
+		if (rule === 'origin') {
 			// anchorPoint
 			let value1 = (value.includes(',')) ? value.split(',')[1] : value;
 
@@ -1828,6 +1926,9 @@ function defaultColors(color) {
 
 function addTransparencyToHex(color, transparency = '00') {
 	if (color.includes('#')) {
+		if (color.includes('\'')) {
+			color = color.replace(/'/g, '');
+		}
 		switch (color.length) {
 			case 4:
 				color = `#${transparency}${color[1]}${color[2]}${color[3]}`
@@ -1841,6 +1942,6 @@ function addTransparencyToHex(color, transparency = '00') {
 		}
 	}
 
-	return color;
+	return `'${color}'`;
 }
 exports.addTransparencyToHex = addTransparencyToHex;

package/lib/templates/tailwind/template.tss

@@ -1,2 +1,2 @@
-// Tailwind CSS v3.0.0: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
+// Tailwind CSS v3.0.7: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
 // Created by Adam Wathan ( https://twitter.com/adamwathan ).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "purgetss",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"description": "An extension for Titanium SDK that generates a set of Tailwind-like classes and values to easily and quickly create beautifully designed mobile apps.",
 	"main": "index.js",
 	"bin": {
@@ -60,7 +60,7 @@
 		"path": "^0.12.7",
 		"prompts": "^2.4.2",
 		"read-css": "^0.3.0",
-		"tailwindcss": "^3.0.1",
+		"tailwindcss": "^3.0.7",
 		"traverse": "^0.6.6",
 		"update-notifier": "^5.1.0",
 		"xml-js": "^1.6.11"