Problem with tss class

[ottopic]

Hello, I'm continuing with test and I have a problem to applicate custom .tss in tabgroup:

index.xml

<Alloy>
  <TabGroup>
    <Tab module="tikit.ui" class="active-tint-violet-900 active-title-violet-900" title="Tabs" icon="far fa-bath text-3xl" activeIcon="fas fa-bath text-3xl">
      <Require src="elements"/>
    </Tab>
    <Tab module="tikit.ui" class="active-tint-violet-900 active-title-violet-900" title="Tabs" icon="mio mi-security_update_good text-3xl" activeIcon="mit mi-security_update_good text-3xl">
      <Require src="complex"/>
    </Tab>
  </TabGroup>
</Alloy>

elements.xml

<Alloy>
  <Window class="container">
    <ScrollView class="vertical">
      <Alert module="tikit.ui" classes="top" variant="pop" color="primary" title="Primary Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="secondary" title="Secondary Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="success" title="Success Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="danger" title="Danger Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="warning" title="Warning Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="info" title="Info Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="dark" title="Dark Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
      <Alert module="tikit.ui" classes="top" variant="pop" color="light" title="Light Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
    </ScrollView>
  </Window>
</Alloy>

elements.tss

".top": {
  top: 20
}

In this case it seems "top" class doesn't works, but if I put "top" configuration inside "index.tss" it works. If I'm not doing something wrong it seems to me that the behavior is different from normal.

[macCesar]

TiKit reads the classes from the compiled file alloy/styles/index.js.

So, .top should be declared in _app.tss in order for the components to get the correct classes and properties.

Or better yet.. declare it in purgetss/config.js file like this:

module.exports = {
  // ...
  theme: {
    extend: {
      // ...
    },
    '.top': {
      default: { top: 20 }
    }
  }
}

But since top: 20 is a default value in tailwind.tss...

You can use mt-5 instead of declaring a new class with the same value!!

If you want to use top instead of mt-5.. you can also declare it like this in config.js:

theme: {
  '.top': {
    apply: 'mt-5'
  }
}

I hope that helps!! 😀

[macCesar]

With any of the three suggestions above you will get the same result:

[macCesar]

BTW... There are also top-xx classes with default values in tailwind.tss, so you don't have to create a new class.

In your example you can use top-5:

<Alert module="tikit.ui" classes="top-5" variant="pop" color="success" title="Success Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />

// Property: top
// Component(s): Ti.UI.View, Ti.Media.VideoPlayer, Ti.UI.ActivityIndicator, Ti.UI.Android.CardView, Ti.UI.Android.DrawerLayout, Ti.UI.Android.SearchView, Ti.UI.Animation, Ti.UI.Button, Ti.UI.ButtonBar, Ti.UI.DashboardView, Ti.UI.ImageView, Ti.UI.Label, Ti.UI.ListView, Ti.UI.MaskedImage, Ti.UI.NavigationWindow, Ti.UI.OptionBar, Padding, Ti.UI.Picker, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.ScrollView, Ti.UI.ScrollableView, Ti.UI.SearchBar, Ti.UI.Slider, Ti.UI.Switch, TabIconInsets, Ti.UI.TabbedBar, Ti.UI.TableView, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField, TextFieldPadding, Ti.UI.Toolbar, Ti.UI.WebView, Ti.UI.Window, openWindowParams, Ti.UI.iOS.BlurView, Ti.UI.iOS.CoverFlowView, Ti.UI.iOS.LivePhotoView, Ti.UI.iOS.SplitWindow, Ti.UI.iOS.Stepper
'.top-0': { top: 0 }
'.top-1': { top: 4 }
'.top-2': { top: 8 }
'.top-3': { top: 12 }
'.top-4': { top: 16 }
'.top-5': { top: 20 }
'.top-6': { top: 24 }
'.top-7': { top: 28 }
'.top-8': { top: 32 }
'.top-9': { top: 36 }
'.top-10': { top: 40 }
'.top-11': { top: 44 }
'.top-12': { top: 48 }
'.top-14': { top: 56 }
'.top-16': { top: 64 }
'.top-20': { top: 80 }
'.top-24': { top: 96 }
'.top-28': { top: 112 }
'.top-32': { top: 128 }
'.top-36': { top: 144 }
'.top-40': { top: 160 }
'.top-44': { top: 176 }
'.top-48': { top: 192 }
'.top-52': { top: 208 }
'.top-56': { top: 224 }
'.top-60': { top: 240 }
'.top-64': { top: 256 }
'.top-72': { top: 288 }
'.top-80': { top: 320 }
'.top-96': { top: 384 }
'.top-auto': { top: null }
'.top-px': { top: '1px' }
'.top-0.5': { top: 2 }
'.top-1.5': { top: 6 }
'.top-2.5': { top: 10 }
'.top-3.5': { top: 14 }
'.top-1/2': { top: '50%' }
'.top-1/3': { top: '33.333334%' }
'.top-2/3': { top: '66.666667%' }
'.top-1/4': { top: '25%' }
'.top-2/4': { top: '50%' }
'.top-3/4': { top: '75%' }
'.top-1/5': { top: '20%' }
'.top-2/5': { top: '40%' }
'.top-3/5': { top: '60%' }
'.top-4/5': { top: '80%' }
'.top-1/6': { top: '16.666667%' }
'.top-2/6': { top: '33.333334%' }
'.top-3/6': { top: '50%' }
'.top-4/6': { top: '66.666667%' }
'.top-5/6': { top: '83.333334%' }
'.top-1/12': { top: '8.333334%' }
'.top-2/12': { top: '16.666667%' }
'.top-3/12': { top: '25%' }
'.top-4/12': { top: '33.333334%' }
'.top-5/12': { top: '41.666667%' }
'.top-6/12': { top: '50%' }
'.top-7/12': { top: '58.333334%' }
'.top-8/12': { top: '66.666667%' }
'.top-9/12': { top: '75%' }
'.top-10/12': { top: '83.333334%' }
'.top-11/12': { top: '91.666667%' }
'.top-full': { top: '100%' }

[ottopic]

Ok I understand. .top class was just as an example