py-tailwind-utils


Namepy-tailwind-utils JSON
Version 1.1.1 PyPI version JSON
download
home_pageNone
Summarytailwind utility classes as first class python objects
upload_time2023-08-31 04:55:11
maintainerNone
docs_urlNone
authorNone
requires_python>=3.11
licenseNone
keywords
VCS
bugtrack_url
requirements No requirements were recorded.
Travis-CI No Travis.
coveralls test coverage No coveralls. 
            # [py-tailwind-utils](https://github.com/Monallabs-org/py-tailwind-utils)
[![Python versions](https://img.shields.io/badge/Python-3.11-green)](https://pypi.python.org/pypi/py-tailwind-utils)
[![Tests Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_tests.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)
[![Coverage Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_coverage.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)
[![Flake8 Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_flake8.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)

[![Documentation](https://img.shields.io/badge/doc-latest-blue.svg)](https://ofjustpy.github.io/py-tailwind-utils/)
[![PyPI](https://img.shields.io/pypi/v/py-tailwind-utils.svg)](https://pypi.python.org/pypi/py-tailwind-utils)
[![Downloads](https://pepy.tech/badge/py-tailwind-utils)](https://pepy.tech/project/py-tailwind-utils)
[![Downloads per week](https://pepy.tech/badge/py-tailwind-utils/week)](https://pepy.tech/project/py-tailwind-utils)
[![GitHub stars](https://img.shields.io/github/stars/ofjustpy/py-tailwind-utils.svg)](https://github.com/ofjustpy/py-tailwind-utils/stargazers)

A library that makes working with Tailwind CSS in python easier. It provides
set of operators, functions, and python native objects that make it easier 
to express and manipulate tailwind directives. 

Instead of styling a component of with a long string such "bg-pink-400 ring-offset-red-200 justify-content-start text-black-800", using
this library you would instead write the same as first class python statement:
```python
tstr(bg/pink/4, ring/offset/red/2, jc.start, fc/black/8)
```
This has several advantages:  
- makes manipulation of styles such as   
  -- passing style directives to functions,   
  -- substitution of style through variable assignment a lot easier.
- makes it feasible to do bookkeeping and analyis of style used across various components of an webpage  
- is basis for theme manipulation, i.e., bulk modify styles of several components using a single command.  


A word of caution: 
This library does pollute the namespace of your python file/module, so be careful if using "from py_tailwind_utils  import *". 
Also, not all construct of tailwind is available here. 



## Usage

### Tailwind constructs as python objects
To begin with the library exports name that reflect various tailwind constructs. For, e.g. `bg`
reflects tailwind utility class `bg`, `bd` reflects `border` and so on. See table for 
mapping between python constructs and tailwind constructs. 


### Tailwind expression builder
The above python-tailwind constructs support division operator using which one can create tailwind styling expression 
such as "bg-green-100", "ring-offset-red-200", etc. In py-tailwind-utils, these are expressed
as first class python objects as `bg/green/1` and `ring/offset/red/2`. 

### Tailwind utility as python enums
The library provides enum classes that encapsulate options for a tailwind utility. 
For e.g. for various options for justify content, the library provides enum class
`JustifyContent` (or `jc`) as follows:
```
class JustifyContent(Enum):
    start = "justify-start"
    end = "justify-end"
    center = "justify-center"
    between = "justify-between"
    evenly = "justify-evenly"
    around = "justify-around"
```
The helps group directives or identify duplicates in a style definition. 

### Tailwind modifier functions 
modifiers are expressed using functions over tailwind expression. 
For example, 
```
hover(jc.end, bg/green/1, fc/blue/8)
```

```
*hover(*focus(bg/green/400), *focus(*placeholder(noop/fw.bold), fc/pink/100))
```

### Convert python style expression to tailwind class expression
The `tstr` function converts python tailwind style expression to 
string value containing tailwind directives. 
In the example,
```
from py_tailwind_utils import tstr
tstr(bg/pink/4, ring/offset/red/2, jc.start, fc/pink/8)
```
`tstr` will convert to proper tailwind definition:
```
bg-pink-400 ring-offset-red-200 justify-start text-pink-800
```
### Append/merge tailwind directive to an existing style list
Provides `conc_twtags` function to add/merge/append new directive  to an exisiting 
list of styles. 
For e.g.  if 
```python 
mytags = [
        bg / green / 1,
        fc / blue / 1,
        flx.row,
    ]
```
is an exisiting set of styles, and if we add `bg/blue/1` using 
`conc_twtags`, then it  will perform
a smart merge, i.e., it will override the exisiting directive
that belong to the same utility class. 
So, 
```python
classes  = tstr(conc_twtags(*mytags, bg/blue/1))
```
will result in:
```
bg-blue-100 text-blue-100 flex-row
```

This feature of `py-tailwind-tags` comes in very useful for theme customization. 

### Remove a tailwind directive
Use `remove_from_twtag_list` to remove a tailwind directive from an existing list. 
An example:
```python 
mytags = [
        bg / green / 1,
        fc / blue / 1,
        jc.start, 
        flx.row,
    ]
 remove_from_twtag_list(mytags, jc.start)
```
Note: will throw ValueError if the request removeal object is not present in the list.
    

### Store tailwind styles as Json 
All the  styles applied to a component can be exported out as json, organized by utility
 class. For example, to print out   json use command:
 
```
res = tt.styClause.to_json(
    *hover(*focus(bg/green/400), *focus(*placeholder(noop/fw.bold), fc/pink/100)))
   
```
which will output:
The `res` out:
```json
{
    "passthrough": [],
    "bg": {
        "_val": "green-400",
        "_modifier_chain": ["hover", "focus"]
    },
    "FontWeight": {
        "_val": "bold",
        "_modifier_chain": ["hover", "focus", "placeholder"]
    },
    "fc": {
        "_val": "pink-100",
        "_modifier_chain": ["hover", "focus"]
    }
}
```

### Load json back as tailwind style 
Finally, once can read back the json, to convert the original tailwind style statement:
```
claus = tt.styClause.to_clause(res)
print(tstr(*claus))
```

Which outputs the original tailwind expression
```
hover:focus:bg-green-400 hover:focus:placeholder:font-bold hover:focus:text-pink-100
```

### Not supported features
#### Background opacity modifiers are not yet supported
So, this expression will fail 


## All supported tailwind constructs in python as keywords or Enum classes

![All supported tailwind constructs in python as keywords or Enum classes](/utils/tailwind_constructs_for_ofjustpy.png?raw=true "Optional Title")

## Reference

### Style Tags
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">


<colgroup>
<col  class="org-left" />

<col  class="org-left" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">python keyword</th>
<th scope="col" class="org-left">tailwind construct</th>
</tr>
</thead>

<tbody>
<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">bd</td>
<td class="org-left">border</td>
</tr>


<tr>
<td class="org-left">from_</td>
<td class="org-left">from</td>
</tr>


<tr>
<td class="org-left">to_</td>
<td class="org-left">to</td>
</tr>


<tr>
<td class="org-left">via_</td>
<td class="org-left">to</td>
</tr>


<tr>
<td class="org-left">cc</td>
<td class="org-left">None</td>
</tr>


<tr>
<td class="org-left">container</td>
<td class="org-left">container</td>
</tr>


<tr>
<td class="org-left">inherit</td>
<td class="org-left">inherit</td>
</tr>


<tr>
<td class="org-left">current</td>
<td class="org-left">current</td>
</tr>


<tr>
<td class="org-left">transparent</td>
<td class="org-left">transparent</td>
</tr>


<tr>
<td class="org-left">first</td>
<td class="org-left">first</td>
</tr>


<tr>
<td class="org-left">full</td>
<td class="org-left">full</td>
</tr>


<tr>
<td class="org-left">screen</td>
<td class="org-left">screen</td>
</tr>


<tr>
<td class="org-left">hidden</td>
<td class="org-left">hidden</td>
</tr>


<tr>
<td class="org-left">last</td>
<td class="org-left">last</td>
</tr>


<tr>
<td class="org-left">none</td>
<td class="org-left">none</td>
</tr>


<tr>
<td class="org-left">scroll</td>
<td class="org-left">scroll</td>
</tr>


<tr>
<td class="org-left">span</td>
<td class="org-left">span</td>
</tr>


<tr>
<td class="org-left">text</td>
<td class="org-left">text</td>
</tr>


<tr>
<td class="org-left">visible</td>
<td class="org-left">visible</td>
</tr>


<tr>
<td class="org-left">auto</td>
<td class="org-left">auto</td>
</tr>


<tr>
<td class="org-left">group</td>
<td class="org-left">group</td>
</tr>


<tr>
<td class="org-left">double</td>
<td class="org-left">double</td>
</tr>


<tr>
<td class="org-left">clip</td>
<td class="org-left">clip</td>
</tr>


<tr>
<td class="org-left">invisible</td>
<td class="org-left">invisible</td>
</tr>


<tr>
<td class="org-left">absolute</td>
<td class="org-left">absolute</td>
</tr>


<tr>
<td class="org-left">grow</td>
<td class="org-left">grow</td>
</tr>


<tr>
<td class="org-left">bg</td>
<td class="org-left">bg</td>
</tr>


<tr>
<td class="org-left">x</td>
<td class="org-left">x</td>
</tr>


<tr>
<td class="org-left">y</td>
<td class="org-left">y</td>
</tr>


<tr>
<td class="org-left">duration</td>
<td class="org-left">duration</td>
</tr>


<tr>
<td class="org-left">inset</td>
<td class="org-left">inset</td>
</tr>


<tr>
<td class="org-left">max</td>
<td class="org-left">max</td>
</tr>


<tr>
<td class="org-left">min</td>
<td class="org-left">min</td>
</tr>


<tr>
<td class="org-left">offset</td>
<td class="org-left">offset</td>
</tr>


<tr>
<td class="org-left">opacity</td>
<td class="org-left">opacity</td>
</tr>


<tr>
<td class="org-left">order</td>
<td class="org-left">order</td>
</tr>


<tr>
<td class="org-left">ring</td>
<td class="org-left">ring</td>
</tr>


<tr>
<td class="org-left">row</td>
<td class="org-left">row</td>
</tr>


<tr>
<td class="org-left">rows</td>
<td class="org-left">rows</td>
</tr>


<tr>
<td class="org-left">col</td>
<td class="org-left">col</td>
</tr>


<tr>
<td class="org-left">cols</td>
<td class="org-left">cols</td>
</tr>


<tr>
<td class="org-left">space</td>
<td class="org-left">space</td>
</tr>


<tr>
<td class="org-left">stroke</td>
<td class="org-left">stroke</td>
</tr>


<tr>
<td class="org-left">gap</td>
<td class="org-left">gap</td>
</tr>


<tr>
<td class="org-left">end</td>
<td class="org-left">end</td>
</tr>


<tr>
<td class="org-left">fc</td>
<td class="org-left">text</td>
</tr>


<tr>
<td class="org-left">G</td>
<td class="org-left">grid</td>
</tr>


<tr>
<td class="org-left">H</td>
<td class="org-left">h</td>
</tr>


<tr>
<td class="org-left">lh</td>
<td class="org-left">leading</td>
</tr>


<tr>
<td class="org-left">mr</td>
<td class="org-left">m</td>
</tr>


<tr>
<td class="org-left">ovf</td>
<td class="org-left">overflow</td>
</tr>


<tr>
<td class="org-left">pd</td>
<td class="org-left">p</td>
</tr>


<tr>
<td class="org-left">ph</td>
<td class="org-left">placeholder</td>
</tr>


<tr>
<td class="org-left">resize</td>
<td class="org-left">resize</td>
</tr>


<tr>
<td class="org-left">sb</td>
<td class="org-left">b</td>
</tr>


<tr>
<td class="org-left">sl</td>
<td class="org-left">l</td>
</tr>


<tr>
<td class="org-left">sr</td>
<td class="org-left">r</td>
</tr>


<tr>
<td class="org-left">st</td>
<td class="org-left">t</td>
</tr>


<tr>
<td class="org-left">top</td>
<td class="org-left">top</td>
</tr>


<tr>
<td class="org-left">right</td>
<td class="org-left">right</td>
</tr>


<tr>
<td class="org-left">bottom</td>
<td class="org-left">bottom</td>
</tr>


<tr>
<td class="org-left">left</td>
<td class="org-left">left</td>
</tr>


<tr>
<td class="org-left">start</td>
<td class="org-left">start</td>
</tr>


<tr>
<td class="org-left">W</td>
<td class="org-left">w</td>
</tr>


<tr>
<td class="org-left">zo</td>
<td class="org-left">z</td>
</tr>


<tr>
<td class="org-left">noop</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">outline</td>
<td class="org-left">outline</td>
</tr>


<tr>
<td class="org-left">shadow</td>
<td class="org-left">shadow</td>
</tr>
</tbody>
</table>




### Style values
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">


<colgroup>
<col  class="org-left" />

<col  class="org-left" />

<col  class="org-left" />

<col  class="org-left" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">Tailwind Utility Class</th>
<th scope="col" class="org-left">Python enum class</th>
<th scope="col" class="org-left">python attr names</th>
<th scope="col" class="org-left">tailwind utility</th>
</tr>
</thead>

<tbody>
<tr>
<td class="org-left">DisplayBox</td>
<td class="org-left">db</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">b</td>
<td class="org-left">block</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">bi</td>
<td class="org-left">inline-block</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">i</td>
<td class="org-left">inline</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">f</td>
<td class="org-left">flex</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">fi</td>
<td class="org-left">inline-flex</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">t</td>
<td class="org-left">table</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">g</td>
<td class="org-left">grid</td>
</tr>


<tr>
<td class="org-left">BoxLayout</td>
<td class="org-left">db</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">b</td>
<td class="org-left">block</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">bi</td>
<td class="org-left">inline-block</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">i</td>
<td class="org-left">inline</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">f</td>
<td class="org-left">flex</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">fi</td>
<td class="org-left">inline-flex</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">t</td>
<td class="org-left">table</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">g</td>
<td class="org-left">grid</td>
</tr>


<tr>
<td class="org-left">WrapAround</td>
<td class="org-left">wa</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">r</td>
<td class="org-left">float-right</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">l</td>
<td class="org-left">float-left</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">n</td>
<td class="org-left">float-none</td>
</tr>


<tr>
<td class="org-left">ClearWrap</td>
<td class="org-left">wc</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">l</td>
<td class="org-left">clear-left</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">r</td>
<td class="org-left">clear-right</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">b</td>
<td class="org-left">clear-both</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">n</td>
<td class="org-left">clear-none</td>
</tr>


<tr>
<td class="org-left">ObjectFit</td>
<td class="org-left">of</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cn</td>
<td class="org-left">object-contain</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cv</td>
<td class="org-left">object-cover</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">f</td>
<td class="org-left">object-fill</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">n</td>
<td class="org-left">object-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sd</td>
<td class="org-left">object-scale-down</td>
</tr>


<tr>
<td class="org-left">ObjectPosition</td>
<td class="org-left">op</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">b</td>
<td class="org-left">object-bottom</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">c</td>
<td class="org-left">object-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">l</td>
<td class="org-left">object-left</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lb</td>
<td class="org-left">object-left-bottom</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lt</td>
<td class="org-left">object-left-top</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">r</td>
<td class="org-left">object-right</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rb</td>
<td class="org-left">object-right-bottom</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">t</td>
<td class="org-left">object-top</td>
</tr>


<tr>
<td class="org-left">Visibility</td>
<td class="org-left">visibility</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">v</td>
<td class="org-left">visible</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">nv</td>
<td class="org-left">invisible</td>
</tr>


<tr>
<td class="org-left">FlexLayout</td>
<td class="org-left">flx</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">row</td>
<td class="org-left">flex-row</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rrow</td>
<td class="org-left">flex-row-reverse</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">col</td>
<td class="org-left">flex-col</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rcol</td>
<td class="org-left">flex-col-reverse</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">wrap</td>
<td class="org-left">flex-wrap</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rwrap</td>
<td class="org-left">flex-wrap-reverse</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">nowrap</td>
<td class="org-left">flex-nowrap</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">one</td>
<td class="org-left">flex-1</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">auto</td>
<td class="org-left">flex-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">initial</td>
<td class="org-left">flex-initial</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">flex-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">grow</td>
<td class="org-left">flex-grow</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">nogrow</td>
<td class="org-left">flex-grow-0</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">shrink</td>
<td class="org-left">flex-shrink</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">noshrink</td>
<td class="org-left">flex-shrink-0</td>
</tr>


<tr>
<td class="org-left">JustifyContent</td>
<td class="org-left">jc</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">justify-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">justify-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">justify-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">between</td>
<td class="org-left">justify-between</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">evenly</td>
<td class="org-left">justify-evenly</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">around</td>
<td class="org-left">justify-around</td>
</tr>


<tr>
<td class="org-left">JustifyItems</td>
<td class="org-left">ji</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">justify-items-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">justify-items-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">justify-items-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">justify-items-stretch</td>
</tr>


<tr>
<td class="org-left">JustifySelf</td>
<td class="org-left">js</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">auto</td>
<td class="org-left">justify-self-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">justify-self-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">justify-self-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">justify-self-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">justify-self-stretch</td>
</tr>


<tr>
<td class="org-left">AlignContent</td>
<td class="org-left">ac</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">content-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">content-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">content-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">between</td>
<td class="org-left">content-between</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">evenly</td>
<td class="org-left">content-evenly</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">around</td>
<td class="org-left">content-around</td>
</tr>


<tr>
<td class="org-left">AlignItems</td>
<td class="org-left">ai</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">items-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">items-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">items-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">items-stretch</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">baseline</td>
<td class="org-left">items-baseline</td>
</tr>


<tr>
<td class="org-left">PlaceContent</td>
<td class="org-left">pc</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">place-content-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">place-content-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">place-content-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">between</td>
<td class="org-left">place-content-between</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">evenly</td>
<td class="org-left">place-content-evenly</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">around</td>
<td class="org-left">place-content-around</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">place-content-stretch</td>
</tr>


<tr>
<td class="org-left">PlaceItems</td>
<td class="org-left">pi</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">place-items-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">place-items-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">place-items-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">place-items-stretch</td>
</tr>


<tr>
<td class="org-left">PlaceSelf</td>
<td class="org-left">ps</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">auto</td>
<td class="org-left">place-self-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">place-self-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">place-self-end</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">place-self-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">stretch</td>
<td class="org-left">place-self-stretch</td>
</tr>


<tr>
<td class="org-left">FontFamily</td>
<td class="org-left">ff</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sans</td>
<td class="org-left">font-sans</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">serif</td>
<td class="org-left">font-serif</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">mono</td>
<td class="org-left">font-mono</td>
</tr>


<tr>
<td class="org-left">FontSize</td>
<td class="org-left">fz</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xs</td>
<td class="org-left">text-xs</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sm</td>
<td class="org-left">text-sm</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">_</td>
<td class="org-left">text-base</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lg</td>
<td class="org-left">text-lg</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl</td>
<td class="org-left">text-xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl2</td>
<td class="org-left">text-2xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl3</td>
<td class="org-left">text-3xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl4</td>
<td class="org-left">text-4xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl5</td>
<td class="org-left">text-5xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl6</td>
<td class="org-left">text-6xl</td>
</tr>


<tr>
<td class="org-left">FontWeight</td>
<td class="org-left">fw</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">thin</td>
<td class="org-left">font-thin</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">extralight</td>
<td class="org-left">font-extralight</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">light</td>
<td class="org-left">font-light</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">normal</td>
<td class="org-left">font-normal</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">medium</td>
<td class="org-left">font-medium</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">bold</td>
<td class="org-left">font-bold</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">extrabold</td>
<td class="org-left">font-extrabold</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">black</td>
<td class="org-left">font-black</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">semibold</td>
<td class="org-left">font-semibold</td>
</tr>


<tr>
<td class="org-left">LetterSpace</td>
<td class="org-left">ls</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">tighter</td>
<td class="org-left">tracking-tighter</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">tight</td>
<td class="org-left">tracking-tight</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">normal</td>
<td class="org-left">tracking-normal</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">wide</td>
<td class="org-left">tracking-wide</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">wider</td>
<td class="org-left">tracking-wider</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">widest</td>
<td class="org-left">tracking-widest</td>
</tr>


<tr>
<td class="org-left">LineHeight</td>
<td class="org-left">lh</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">leading-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">tight</td>
<td class="org-left">leading-tight</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">snug</td>
<td class="org-left">leading-snug</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">normal</td>
<td class="org-left">leading-normal</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">relaxed</td>
<td class="org-left">leading-relaxed</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">loose</td>
<td class="org-left">leading-loose</td>
</tr>


<tr>
<td class="org-left">ListItems</td>
<td class="org-left">li</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">list-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">disc</td>
<td class="org-left">list-disc</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">decimal</td>
<td class="org-left">list-decimal</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">inside</td>
<td class="org-left">list-inside</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">outside</td>
<td class="org-left">list-outside</td>
</tr>


<tr>
<td class="org-left">TextAlign</td>
<td class="org-left">ta</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">left</td>
<td class="org-left">text-left</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">center</td>
<td class="org-left">text-center</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">right</td>
<td class="org-left">text-right</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">justify</td>
<td class="org-left">text-justify</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">start</td>
<td class="org-left">text-start</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">end</td>
<td class="org-left">text-end</td>
</tr>


<tr>
<td class="org-left">TextTransform</td>
<td class="org-left">tt</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">u</td>
<td class="org-left">uppercase</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">l</td>
<td class="org-left">lowercase</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">c</td>
<td class="org-left">capitalize</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">n</td>
<td class="org-left">normal-case</td>
</tr>


<tr>
<td class="org-left">VerticalAlign</td>
<td class="org-left">va</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">top</td>
<td class="org-left">align-top</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">middle</td>
<td class="org-left">align-middle</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">bottom</td>
<td class="org-left">align-bottom</td>
</tr>


<tr>
<td class="org-left">BackgroundAttachment</td>
<td class="org-left">ba</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">f</td>
<td class="org-left">bg-fixed</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">l</td>
<td class="org-left">bg-local</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">s</td>
<td class="org-left">bg-scroll</td>
</tr>


<tr>
<td class="org-left">BorderRadius</td>
<td class="org-left">bdr</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sm</td>
<td class="org-left">rounded-sm</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">md</td>
<td class="org-left">rounded-md</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lg</td>
<td class="org-left">rounded-lg</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">full</td>
<td class="org-left">rounded-full</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">rounded-none</td>
</tr>


<tr>
<td class="org-left">BorderStyle</td>
<td class="org-left">bds</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">solid</td>
<td class="org-left">border-solid</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">dashed</td>
<td class="org-left">border-dashed</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">dotted</td>
<td class="org-left">border-dotted</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">double</td>
<td class="org-left">border-double</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">border-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">collapse</td>
<td class="org-left">border-collapse</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">separate</td>
<td class="org-left">border-separate</td>
</tr>


<tr>
<td class="org-left">Outline</td>
<td class="org-left">outline</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">outline-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">_</td>
<td class="org-left">outline</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">dashed</td>
<td class="org-left">outline-dashed</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">dotted</td>
<td class="org-left">outline-dotted</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">double</td>
<td class="org-left">outline-double</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">hidden</td>
<td class="org-left">outline-hidden</td>
</tr>


<tr>
<td class="org-left">BoxShadow</td>
<td class="org-left">shadow</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sm</td>
<td class="org-left">shadow-sm</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">_</td>
<td class="org-left">shadow</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">md</td>
<td class="org-left">shadow-md</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lg</td>
<td class="org-left">shadow-lg</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl</td>
<td class="org-left">shadow-xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl2</td>
<td class="org-left">shadow-2xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">none</td>
<td class="org-left">shadow-none</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">inner</td>
<td class="org-left">shadow-inner</td>
</tr>


<tr>
<td class="org-left">Table</td>
<td class="org-left">tbl</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">auto</td>
<td class="org-left">table-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">fixed</td>
<td class="org-left">table-fixed</td>
</tr>


<tr>
<td class="org-left">BoxTopo</td>
<td class="org-left">bt</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">bd</td>
<td class="org-left">border</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">container</td>
<td class="org-left">container</td>
</tr>


<tr>
<td class="org-left">PlacementPosition</td>
<td class="org-left">ppos</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">static</td>
<td class="org-left">static</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">fixed</td>
<td class="org-left">fixed</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">absolute</td>
<td class="org-left">absolute</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">relative</td>
<td class="org-left">relative</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sticky</td>
<td class="org-left">sticky</td>
</tr>


<tr>
<td class="org-left">BoxSizing</td>
<td class="org-left">boxsz</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">b</td>
<td class="org-left">box-border</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">c</td>
<td class="org-left">box-content</td>
</tr>


<tr>
<td class="org-left">Prose</td>
<td class="org-left">prse</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">sm</td>
<td class="org-left">prose-sm</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">_</td>
<td class="org-left">prose-base</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">lg</td>
<td class="org-left">prose-lg</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl</td>
<td class="org-left">prose-xl</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">xl2</td>
<td class="org-left">prose-2xl</td>
</tr>


<tr>
<td class="org-left">GridFlow</td>
<td class="org-left">gf</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">row</td>
<td class="org-left">grid-flow-row</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">col</td>
<td class="org-left">grid-flow-col</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rowd</td>
<td class="org-left">grid-flow-row-dense</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cold</td>
<td class="org-left">grid-flow-col-dense</td>
</tr>


<tr>
<td class="org-left">GridAuto</td>
<td class="org-left">ga</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cauto</td>
<td class="org-left">grid-cols-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cmin</td>
<td class="org-left">grid-cols-min</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cmax</td>
<td class="org-left">grid-cols-max</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">cfr</td>
<td class="org-left">grid-cols-fr</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rauto</td>
<td class="org-left">grid-rows-auto</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rmin</td>
<td class="org-left">grid-ros-min</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rmax</td>
<td class="org-left">grid-rows-max</td>
</tr>


<tr>
<td class="org-left">&#xa0;</td>
<td class="org-left">&#xa0;</td>
<td class="org-left">rfr</td>
<td class="org-left">grid-rows-fr</td>
</tr>
</tbody>
</table>


### EndNotes
- Docs (in readthedocs format): https://github.com/Monallabs-org/py-tailwind-utils  

- Developed By: webworks.monallabs.in

Raw data

            {
    "_id": null,
    "home_page": null,
    "name": "py-tailwind-utils",
    "maintainer": null,
    "docs_url": null,
    "requires_python": ">=3.11",
    "maintainer_email": "Kabira K <kabira@monallabs.in>",
    "keywords": null,
    "author": null,
    "author_email": null,
    "download_url": "https://files.pythonhosted.org/packages/b5/35/91a837457ee2420a09a7f80bd450acdaf094cdf68cc668384d5103387a3f/py-tailwind-utils-1.1.1.tar.gz",
    "platform": null,
    "description": "# [py-tailwind-utils](https://github.com/Monallabs-org/py-tailwind-utils)\n[![Python versions](https://img.shields.io/badge/Python-3.11-green)](https://pypi.python.org/pypi/py-tailwind-utils)\n[![Tests Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_tests.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)\n[![Coverage Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_coverage.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)\n[![Flake8 Status](https://github.com/ofjustpy/py-tailwind-utils/blob/main/badge_flake8.svg)](https://github.com/ofjustpy/py-tailwind-utils/actions)\n\n[![Documentation](https://img.shields.io/badge/doc-latest-blue.svg)](https://ofjustpy.github.io/py-tailwind-utils/)\n[![PyPI](https://img.shields.io/pypi/v/py-tailwind-utils.svg)](https://pypi.python.org/pypi/py-tailwind-utils)\n[![Downloads](https://pepy.tech/badge/py-tailwind-utils)](https://pepy.tech/project/py-tailwind-utils)\n[![Downloads per week](https://pepy.tech/badge/py-tailwind-utils/week)](https://pepy.tech/project/py-tailwind-utils)\n[![GitHub stars](https://img.shields.io/github/stars/ofjustpy/py-tailwind-utils.svg)](https://github.com/ofjustpy/py-tailwind-utils/stargazers)\n\nA library that makes working with Tailwind CSS in python easier. It provides\nset of operators, functions, and python native objects that make it easier \nto express and manipulate tailwind directives. \n\nInstead of styling a component of with a long string such \"bg-pink-400 ring-offset-red-200 justify-content-start text-black-800\", using\nthis library you would instead write the same as first class python statement:\n```python\ntstr(bg/pink/4, ring/offset/red/2, jc.start, fc/black/8)\n```\nThis has several advantages:  \n- makes manipulation of styles such as   \n  -- passing style directives to functions,   \n  -- substitution of style through variable assignment a lot easier.\n- makes it feasible to do bookkeeping and analyis of style used across various components of an webpage  \n- is basis for theme manipulation, i.e., bulk modify styles of several components using a single command.  \n\n\nA word of caution: \nThis library does pollute the namespace of your python file/module, so be careful if using \"from py_tailwind_utils  import *\". \nAlso, not all construct of tailwind is available here. \n\n\n\n## Usage\n\n### Tailwind constructs as python objects\nTo begin with the library exports name that reflect various tailwind constructs. For, e.g. `bg`\nreflects tailwind utility class `bg`, `bd` reflects `border` and so on. See table for \nmapping between python constructs and tailwind constructs. \n\n\n### Tailwind expression builder\nThe above python-tailwind constructs support division operator using which one can create tailwind styling expression \nsuch as \"bg-green-100\", \"ring-offset-red-200\", etc. In py-tailwind-utils, these are expressed\nas first class python objects as `bg/green/1` and `ring/offset/red/2`. \n\n### Tailwind utility as python enums\nThe library provides enum classes that encapsulate options for a tailwind utility. \nFor e.g. for various options for justify content, the library provides enum class\n`JustifyContent` (or `jc`) as follows:\n```\nclass JustifyContent(Enum):\n    start = \"justify-start\"\n    end = \"justify-end\"\n    center = \"justify-center\"\n    between = \"justify-between\"\n    evenly = \"justify-evenly\"\n    around = \"justify-around\"\n```\nThe helps group directives or identify duplicates in a style definition. \n\n### Tailwind modifier functions \nmodifiers are expressed using functions over tailwind expression. \nFor example, \n```\nhover(jc.end, bg/green/1, fc/blue/8)\n```\n\n```\n*hover(*focus(bg/green/400), *focus(*placeholder(noop/fw.bold), fc/pink/100))\n```\n\n### Convert python style expression to tailwind class expression\nThe `tstr` function converts python tailwind style expression to \nstring value containing tailwind directives. \nIn the example,\n```\nfrom py_tailwind_utils import tstr\ntstr(bg/pink/4, ring/offset/red/2, jc.start, fc/pink/8)\n```\n`tstr` will convert to proper tailwind definition:\n```\nbg-pink-400 ring-offset-red-200 justify-start text-pink-800\n```\n### Append/merge tailwind directive to an existing style list\nProvides `conc_twtags` function to add/merge/append new directive  to an exisiting \nlist of styles. \nFor e.g.  if \n```python \nmytags = [\n        bg / green / 1,\n        fc / blue / 1,\n        flx.row,\n    ]\n```\nis an exisiting set of styles, and if we add `bg/blue/1` using \n`conc_twtags`, then it  will perform\na smart merge, i.e., it will override the exisiting directive\nthat belong to the same utility class. \nSo, \n```python\nclasses  = tstr(conc_twtags(*mytags, bg/blue/1))\n```\nwill result in:\n```\nbg-blue-100 text-blue-100 flex-row\n```\n\nThis feature of `py-tailwind-tags` comes in very useful for theme customization. \n\n### Remove a tailwind directive\nUse `remove_from_twtag_list` to remove a tailwind directive from an existing list. \nAn example:\n```python \nmytags = [\n        bg / green / 1,\n        fc / blue / 1,\n        jc.start, \n        flx.row,\n    ]\n remove_from_twtag_list(mytags, jc.start)\n```\nNote: will throw ValueError if the request removeal object is not present in the list.\n    \n\n### Store tailwind styles as Json \nAll the  styles applied to a component can be exported out as json, organized by utility\n class. For example, to print out   json use command:\n \n```\nres = tt.styClause.to_json(\n    *hover(*focus(bg/green/400), *focus(*placeholder(noop/fw.bold), fc/pink/100)))\n   \n```\nwhich will output:\nThe `res` out:\n```json\n{\n    \"passthrough\": [],\n    \"bg\": {\n        \"_val\": \"green-400\",\n        \"_modifier_chain\": [\"hover\", \"focus\"]\n    },\n    \"FontWeight\": {\n        \"_val\": \"bold\",\n        \"_modifier_chain\": [\"hover\", \"focus\", \"placeholder\"]\n    },\n    \"fc\": {\n        \"_val\": \"pink-100\",\n        \"_modifier_chain\": [\"hover\", \"focus\"]\n    }\n}\n```\n\n### Load json back as tailwind style \nFinally, once can read back the json, to convert the original tailwind style statement:\n```\nclaus = tt.styClause.to_clause(res)\nprint(tstr(*claus))\n```\n\nWhich outputs the original tailwind expression\n```\nhover:focus:bg-green-400 hover:focus:placeholder:font-bold hover:focus:text-pink-100\n```\n\n### Not supported features\n#### Background opacity modifiers are not yet supported\nSo, this expression will fail \n\n\n## All supported tailwind constructs in python as keywords or Enum classes\n\n![All supported tailwind constructs in python as keywords or Enum classes](/utils/tailwind_constructs_for_ofjustpy.png?raw=true \"Optional Title\")\n\n## Reference\n\n### Style Tags\n<table border=\"2\" cellspacing=\"0\" cellpadding=\"6\" rules=\"groups\" frame=\"hsides\">\n\n\n<colgroup>\n<col  class=\"org-left\" />\n\n<col  class=\"org-left\" />\n</colgroup>\n<thead>\n<tr>\n<th scope=\"col\" class=\"org-left\">python keyword</th>\n<th scope=\"col\" class=\"org-left\">tailwind construct</th>\n</tr>\n</thead>\n\n<tbody>\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">bd</td>\n<td class=\"org-left\">border</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">from_</td>\n<td class=\"org-left\">from</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">to_</td>\n<td class=\"org-left\">to</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">via_</td>\n<td class=\"org-left\">to</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">cc</td>\n<td class=\"org-left\">None</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">container</td>\n<td class=\"org-left\">container</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">inherit</td>\n<td class=\"org-left\">inherit</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">current</td>\n<td class=\"org-left\">current</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">transparent</td>\n<td class=\"org-left\">transparent</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">first</td>\n<td class=\"org-left\">first</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">full</td>\n<td class=\"org-left\">full</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">screen</td>\n<td class=\"org-left\">screen</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">hidden</td>\n<td class=\"org-left\">hidden</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">last</td>\n<td class=\"org-left\">last</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">scroll</td>\n<td class=\"org-left\">scroll</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">span</td>\n<td class=\"org-left\">span</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">text</td>\n<td class=\"org-left\">text</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">visible</td>\n<td class=\"org-left\">visible</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">auto</td>\n<td class=\"org-left\">auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">group</td>\n<td class=\"org-left\">group</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">double</td>\n<td class=\"org-left\">double</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">clip</td>\n<td class=\"org-left\">clip</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">invisible</td>\n<td class=\"org-left\">invisible</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">absolute</td>\n<td class=\"org-left\">absolute</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">grow</td>\n<td class=\"org-left\">grow</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">bg</td>\n<td class=\"org-left\">bg</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">x</td>\n<td class=\"org-left\">x</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">y</td>\n<td class=\"org-left\">y</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">duration</td>\n<td class=\"org-left\">duration</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">inset</td>\n<td class=\"org-left\">inset</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">max</td>\n<td class=\"org-left\">max</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">min</td>\n<td class=\"org-left\">min</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">offset</td>\n<td class=\"org-left\">offset</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">opacity</td>\n<td class=\"org-left\">opacity</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">order</td>\n<td class=\"org-left\">order</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ring</td>\n<td class=\"org-left\">ring</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">row</td>\n<td class=\"org-left\">row</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">rows</td>\n<td class=\"org-left\">rows</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">col</td>\n<td class=\"org-left\">col</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">cols</td>\n<td class=\"org-left\">cols</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">space</td>\n<td class=\"org-left\">space</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">stroke</td>\n<td class=\"org-left\">stroke</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">gap</td>\n<td class=\"org-left\">gap</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">fc</td>\n<td class=\"org-left\">text</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">G</td>\n<td class=\"org-left\">grid</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">H</td>\n<td class=\"org-left\">h</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">lh</td>\n<td class=\"org-left\">leading</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">mr</td>\n<td class=\"org-left\">m</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ovf</td>\n<td class=\"org-left\">overflow</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">pd</td>\n<td class=\"org-left\">p</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ph</td>\n<td class=\"org-left\">placeholder</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">resize</td>\n<td class=\"org-left\">resize</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">sb</td>\n<td class=\"org-left\">b</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">sl</td>\n<td class=\"org-left\">l</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">sr</td>\n<td class=\"org-left\">r</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">st</td>\n<td class=\"org-left\">t</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">top</td>\n<td class=\"org-left\">top</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">right</td>\n<td class=\"org-left\">right</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">bottom</td>\n<td class=\"org-left\">bottom</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">left</td>\n<td class=\"org-left\">left</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">W</td>\n<td class=\"org-left\">w</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">zo</td>\n<td class=\"org-left\">z</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">noop</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">outline</td>\n<td class=\"org-left\">outline</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">shadow</td>\n<td class=\"org-left\">shadow</td>\n</tr>\n</tbody>\n</table>\n\n\n\n\n### Style values\n<table border=\"2\" cellspacing=\"0\" cellpadding=\"6\" rules=\"groups\" frame=\"hsides\">\n\n\n<colgroup>\n<col  class=\"org-left\" />\n\n<col  class=\"org-left\" />\n\n<col  class=\"org-left\" />\n\n<col  class=\"org-left\" />\n</colgroup>\n<thead>\n<tr>\n<th scope=\"col\" class=\"org-left\">Tailwind Utility Class</th>\n<th scope=\"col\" class=\"org-left\">Python enum class</th>\n<th scope=\"col\" class=\"org-left\">python attr names</th>\n<th scope=\"col\" class=\"org-left\">tailwind utility</th>\n</tr>\n</thead>\n\n<tbody>\n<tr>\n<td class=\"org-left\">DisplayBox</td>\n<td class=\"org-left\">db</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">b</td>\n<td class=\"org-left\">block</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">bi</td>\n<td class=\"org-left\">inline-block</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">i</td>\n<td class=\"org-left\">inline</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">f</td>\n<td class=\"org-left\">flex</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">fi</td>\n<td class=\"org-left\">inline-flex</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">t</td>\n<td class=\"org-left\">table</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">g</td>\n<td class=\"org-left\">grid</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BoxLayout</td>\n<td class=\"org-left\">db</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">b</td>\n<td class=\"org-left\">block</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">bi</td>\n<td class=\"org-left\">inline-block</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">i</td>\n<td class=\"org-left\">inline</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">f</td>\n<td class=\"org-left\">flex</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">fi</td>\n<td class=\"org-left\">inline-flex</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">t</td>\n<td class=\"org-left\">table</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">g</td>\n<td class=\"org-left\">grid</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">WrapAround</td>\n<td class=\"org-left\">wa</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">r</td>\n<td class=\"org-left\">float-right</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">l</td>\n<td class=\"org-left\">float-left</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">n</td>\n<td class=\"org-left\">float-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ClearWrap</td>\n<td class=\"org-left\">wc</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">l</td>\n<td class=\"org-left\">clear-left</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">r</td>\n<td class=\"org-left\">clear-right</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">b</td>\n<td class=\"org-left\">clear-both</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">n</td>\n<td class=\"org-left\">clear-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ObjectFit</td>\n<td class=\"org-left\">of</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cn</td>\n<td class=\"org-left\">object-contain</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cv</td>\n<td class=\"org-left\">object-cover</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">f</td>\n<td class=\"org-left\">object-fill</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">n</td>\n<td class=\"org-left\">object-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sd</td>\n<td class=\"org-left\">object-scale-down</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ObjectPosition</td>\n<td class=\"org-left\">op</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">b</td>\n<td class=\"org-left\">object-bottom</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">c</td>\n<td class=\"org-left\">object-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">l</td>\n<td class=\"org-left\">object-left</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lb</td>\n<td class=\"org-left\">object-left-bottom</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lt</td>\n<td class=\"org-left\">object-left-top</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">r</td>\n<td class=\"org-left\">object-right</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rb</td>\n<td class=\"org-left\">object-right-bottom</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">t</td>\n<td class=\"org-left\">object-top</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">Visibility</td>\n<td class=\"org-left\">visibility</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">v</td>\n<td class=\"org-left\">visible</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">nv</td>\n<td class=\"org-left\">invisible</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">FlexLayout</td>\n<td class=\"org-left\">flx</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">row</td>\n<td class=\"org-left\">flex-row</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rrow</td>\n<td class=\"org-left\">flex-row-reverse</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">col</td>\n<td class=\"org-left\">flex-col</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rcol</td>\n<td class=\"org-left\">flex-col-reverse</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">wrap</td>\n<td class=\"org-left\">flex-wrap</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rwrap</td>\n<td class=\"org-left\">flex-wrap-reverse</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">nowrap</td>\n<td class=\"org-left\">flex-nowrap</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">one</td>\n<td class=\"org-left\">flex-1</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">auto</td>\n<td class=\"org-left\">flex-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">initial</td>\n<td class=\"org-left\">flex-initial</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">flex-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">grow</td>\n<td class=\"org-left\">flex-grow</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">nogrow</td>\n<td class=\"org-left\">flex-grow-0</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">shrink</td>\n<td class=\"org-left\">flex-shrink</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">noshrink</td>\n<td class=\"org-left\">flex-shrink-0</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">JustifyContent</td>\n<td class=\"org-left\">jc</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">justify-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">justify-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">justify-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">between</td>\n<td class=\"org-left\">justify-between</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">evenly</td>\n<td class=\"org-left\">justify-evenly</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">around</td>\n<td class=\"org-left\">justify-around</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">JustifyItems</td>\n<td class=\"org-left\">ji</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">justify-items-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">justify-items-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">justify-items-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">justify-items-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">JustifySelf</td>\n<td class=\"org-left\">js</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">auto</td>\n<td class=\"org-left\">justify-self-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">justify-self-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">justify-self-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">justify-self-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">justify-self-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">AlignContent</td>\n<td class=\"org-left\">ac</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">content-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">content-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">content-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">between</td>\n<td class=\"org-left\">content-between</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">evenly</td>\n<td class=\"org-left\">content-evenly</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">around</td>\n<td class=\"org-left\">content-around</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">AlignItems</td>\n<td class=\"org-left\">ai</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">items-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">items-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">items-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">items-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">baseline</td>\n<td class=\"org-left\">items-baseline</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">PlaceContent</td>\n<td class=\"org-left\">pc</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">place-content-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">place-content-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">place-content-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">between</td>\n<td class=\"org-left\">place-content-between</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">evenly</td>\n<td class=\"org-left\">place-content-evenly</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">around</td>\n<td class=\"org-left\">place-content-around</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">place-content-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">PlaceItems</td>\n<td class=\"org-left\">pi</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">place-items-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">place-items-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">place-items-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">place-items-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">PlaceSelf</td>\n<td class=\"org-left\">ps</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">auto</td>\n<td class=\"org-left\">place-self-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">place-self-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">place-self-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">place-self-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">stretch</td>\n<td class=\"org-left\">place-self-stretch</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">FontFamily</td>\n<td class=\"org-left\">ff</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sans</td>\n<td class=\"org-left\">font-sans</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">serif</td>\n<td class=\"org-left\">font-serif</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">mono</td>\n<td class=\"org-left\">font-mono</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">FontSize</td>\n<td class=\"org-left\">fz</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xs</td>\n<td class=\"org-left\">text-xs</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sm</td>\n<td class=\"org-left\">text-sm</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">_</td>\n<td class=\"org-left\">text-base</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lg</td>\n<td class=\"org-left\">text-lg</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl</td>\n<td class=\"org-left\">text-xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl2</td>\n<td class=\"org-left\">text-2xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl3</td>\n<td class=\"org-left\">text-3xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl4</td>\n<td class=\"org-left\">text-4xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl5</td>\n<td class=\"org-left\">text-5xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl6</td>\n<td class=\"org-left\">text-6xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">FontWeight</td>\n<td class=\"org-left\">fw</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">thin</td>\n<td class=\"org-left\">font-thin</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">extralight</td>\n<td class=\"org-left\">font-extralight</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">light</td>\n<td class=\"org-left\">font-light</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">normal</td>\n<td class=\"org-left\">font-normal</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">medium</td>\n<td class=\"org-left\">font-medium</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">bold</td>\n<td class=\"org-left\">font-bold</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">extrabold</td>\n<td class=\"org-left\">font-extrabold</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">black</td>\n<td class=\"org-left\">font-black</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">semibold</td>\n<td class=\"org-left\">font-semibold</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">LetterSpace</td>\n<td class=\"org-left\">ls</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">tighter</td>\n<td class=\"org-left\">tracking-tighter</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">tight</td>\n<td class=\"org-left\">tracking-tight</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">normal</td>\n<td class=\"org-left\">tracking-normal</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">wide</td>\n<td class=\"org-left\">tracking-wide</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">wider</td>\n<td class=\"org-left\">tracking-wider</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">widest</td>\n<td class=\"org-left\">tracking-widest</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">LineHeight</td>\n<td class=\"org-left\">lh</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">leading-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">tight</td>\n<td class=\"org-left\">leading-tight</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">snug</td>\n<td class=\"org-left\">leading-snug</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">normal</td>\n<td class=\"org-left\">leading-normal</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">relaxed</td>\n<td class=\"org-left\">leading-relaxed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">loose</td>\n<td class=\"org-left\">leading-loose</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">ListItems</td>\n<td class=\"org-left\">li</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">list-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">disc</td>\n<td class=\"org-left\">list-disc</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">decimal</td>\n<td class=\"org-left\">list-decimal</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">inside</td>\n<td class=\"org-left\">list-inside</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">outside</td>\n<td class=\"org-left\">list-outside</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">TextAlign</td>\n<td class=\"org-left\">ta</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">left</td>\n<td class=\"org-left\">text-left</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">center</td>\n<td class=\"org-left\">text-center</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">right</td>\n<td class=\"org-left\">text-right</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">justify</td>\n<td class=\"org-left\">text-justify</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">start</td>\n<td class=\"org-left\">text-start</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">end</td>\n<td class=\"org-left\">text-end</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">TextTransform</td>\n<td class=\"org-left\">tt</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">u</td>\n<td class=\"org-left\">uppercase</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">l</td>\n<td class=\"org-left\">lowercase</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">c</td>\n<td class=\"org-left\">capitalize</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">n</td>\n<td class=\"org-left\">normal-case</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">VerticalAlign</td>\n<td class=\"org-left\">va</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">top</td>\n<td class=\"org-left\">align-top</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">middle</td>\n<td class=\"org-left\">align-middle</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">bottom</td>\n<td class=\"org-left\">align-bottom</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BackgroundAttachment</td>\n<td class=\"org-left\">ba</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">f</td>\n<td class=\"org-left\">bg-fixed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">l</td>\n<td class=\"org-left\">bg-local</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">s</td>\n<td class=\"org-left\">bg-scroll</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BorderRadius</td>\n<td class=\"org-left\">bdr</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sm</td>\n<td class=\"org-left\">rounded-sm</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">md</td>\n<td class=\"org-left\">rounded-md</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lg</td>\n<td class=\"org-left\">rounded-lg</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">full</td>\n<td class=\"org-left\">rounded-full</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">rounded-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BorderStyle</td>\n<td class=\"org-left\">bds</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">solid</td>\n<td class=\"org-left\">border-solid</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">dashed</td>\n<td class=\"org-left\">border-dashed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">dotted</td>\n<td class=\"org-left\">border-dotted</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">double</td>\n<td class=\"org-left\">border-double</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">border-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">collapse</td>\n<td class=\"org-left\">border-collapse</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">separate</td>\n<td class=\"org-left\">border-separate</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">Outline</td>\n<td class=\"org-left\">outline</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">outline-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">_</td>\n<td class=\"org-left\">outline</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">dashed</td>\n<td class=\"org-left\">outline-dashed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">dotted</td>\n<td class=\"org-left\">outline-dotted</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">double</td>\n<td class=\"org-left\">outline-double</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">hidden</td>\n<td class=\"org-left\">outline-hidden</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BoxShadow</td>\n<td class=\"org-left\">shadow</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sm</td>\n<td class=\"org-left\">shadow-sm</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">_</td>\n<td class=\"org-left\">shadow</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">md</td>\n<td class=\"org-left\">shadow-md</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lg</td>\n<td class=\"org-left\">shadow-lg</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl</td>\n<td class=\"org-left\">shadow-xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl2</td>\n<td class=\"org-left\">shadow-2xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">none</td>\n<td class=\"org-left\">shadow-none</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">inner</td>\n<td class=\"org-left\">shadow-inner</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">Table</td>\n<td class=\"org-left\">tbl</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">auto</td>\n<td class=\"org-left\">table-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">fixed</td>\n<td class=\"org-left\">table-fixed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BoxTopo</td>\n<td class=\"org-left\">bt</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">bd</td>\n<td class=\"org-left\">border</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">container</td>\n<td class=\"org-left\">container</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">PlacementPosition</td>\n<td class=\"org-left\">ppos</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">static</td>\n<td class=\"org-left\">static</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">fixed</td>\n<td class=\"org-left\">fixed</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">absolute</td>\n<td class=\"org-left\">absolute</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">relative</td>\n<td class=\"org-left\">relative</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sticky</td>\n<td class=\"org-left\">sticky</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">BoxSizing</td>\n<td class=\"org-left\">boxsz</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">b</td>\n<td class=\"org-left\">box-border</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">c</td>\n<td class=\"org-left\">box-content</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">Prose</td>\n<td class=\"org-left\">prse</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">sm</td>\n<td class=\"org-left\">prose-sm</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">_</td>\n<td class=\"org-left\">prose-base</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">lg</td>\n<td class=\"org-left\">prose-lg</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl</td>\n<td class=\"org-left\">prose-xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">xl2</td>\n<td class=\"org-left\">prose-2xl</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">GridFlow</td>\n<td class=\"org-left\">gf</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">row</td>\n<td class=\"org-left\">grid-flow-row</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">col</td>\n<td class=\"org-left\">grid-flow-col</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rowd</td>\n<td class=\"org-left\">grid-flow-row-dense</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cold</td>\n<td class=\"org-left\">grid-flow-col-dense</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">GridAuto</td>\n<td class=\"org-left\">ga</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cauto</td>\n<td class=\"org-left\">grid-cols-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cmin</td>\n<td class=\"org-left\">grid-cols-min</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cmax</td>\n<td class=\"org-left\">grid-cols-max</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">cfr</td>\n<td class=\"org-left\">grid-cols-fr</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rauto</td>\n<td class=\"org-left\">grid-rows-auto</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rmin</td>\n<td class=\"org-left\">grid-ros-min</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rmax</td>\n<td class=\"org-left\">grid-rows-max</td>\n</tr>\n\n\n<tr>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">&#xa0;</td>\n<td class=\"org-left\">rfr</td>\n<td class=\"org-left\">grid-rows-fr</td>\n</tr>\n</tbody>\n</table>\n\n\n### EndNotes\n- Docs (in readthedocs format): https://github.com/Monallabs-org/py-tailwind-utils  \n\n- Developed By: webworks.monallabs.in\n\n",
    "bugtrack_url": null,
    "license": null,
    "summary": "tailwind utility classes as first class python objects",
    "version": "1.1.1",
    "project_urls": {
        "Documentation": "https://monallabs-org.github.io/py-tailwind-utils",
        "Home": "https://webworks.monallabs.in/ofjustpy/addict-tracking-changes",
        "Source": "https://github.com/monallabs-org/py-tailwind-utils"
    },
    "split_keywords": [],
    "urls": [
        {
            "comment_text": null,
            "digests": {
                "blake2b_256": "fe50ca53cc7b7476aeeb929a5adb855e096a28a31ce60272f3bd8a72d523bc05",
                "md5": "a3852cb4dcf1842f200524c8e0ef4134",
                "sha256": "6795edb0d2eacbcc1548b64b37c8802d99dccafd49e9233bb4fb23700c23db98"
            },
            "downloads": -1,
            "filename": "py_tailwind_utils-1.1.1-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "a3852cb4dcf1842f200524c8e0ef4134",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": ">=3.11",
            "size": 33874,
            "upload_time": "2023-08-31T04:55:07",
            "upload_time_iso_8601": "2023-08-31T04:55:07.256188Z",
            "url": "https://files.pythonhosted.org/packages/fe/50/ca53cc7b7476aeeb929a5adb855e096a28a31ce60272f3bd8a72d523bc05/py_tailwind_utils-1.1.1-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": null,
            "digests": {
                "blake2b_256": "b53591a837457ee2420a09a7f80bd450acdaf094cdf68cc668384d5103387a3f",
                "md5": "9f5ff59621aef6ff241a1567e8762bf1",
                "sha256": "041fb9d456208811534b7ffbbcdd2c50729ccc021034fcc8bb1af009581f618b"
            },
            "downloads": -1,
            "filename": "py-tailwind-utils-1.1.1.tar.gz",
            "has_sig": false,
            "md5_digest": "9f5ff59621aef6ff241a1567e8762bf1",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": ">=3.11",
            "size": 223839,
            "upload_time": "2023-08-31T04:55:11",
            "upload_time_iso_8601": "2023-08-31T04:55:11.739968Z",
            "url": "https://files.pythonhosted.org/packages/b5/35/91a837457ee2420a09a7f80bd450acdaf094cdf68cc668384d5103387a3f/py-tailwind-utils-1.1.1.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2023-08-31 04:55:11",
    "github": true,
    "gitlab": false,
    "bitbucket": false,
    "codeberg": false,
    "github_user": "monallabs-org",
    "github_project": "py-tailwind-utils",
    "travis_ci": false,
    "coveralls": false,
    "github_actions": false,
    "requirements": [],
    "lcname": "py-tailwind-utils"
}
None
Elapsed time: 0.11329s