https://github.com/alexander-schranz/tailwind-objects

A tailwind plugin which provides common object classes.
https://github.com/alexander-schranz/tailwind-objects

tailwindcss tailwindcss-plugin tailwindcss-v3

Last synced: 16 days ago
JSON representation

A tailwind plugin which provides common object classes.

• Host: GitHub
• URL: https://github.com/alexander-schranz/tailwind-objects
• Owner: alexander-schranz
• Created: 2021-11-01T01:59:55.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-01T02:26:21.000Z (about 3 years ago)
• Last Synced: 2024-05-02T01:13:45.561Z (8 months ago)
• Topics: tailwindcss, tailwindcss-plugin, tailwindcss-v3
• Language: HTML
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind Objects

This tailwind plugin provides common objects:

## Objects

### Container

Classes: `o-container`, `o-container-{spacing}`, `o-container-{maxWidth}-{spacing}`

A container object defines the max-width of the content and the min spacing 

to the window edge.

![Container Example](https://raw.githubusercontent.com/alexander-schranz/itcss/main/images/container.png)

### Stack

Classes: `o-stack`, `o-stack-{spacing}`

A stack object defines the vertical space between objects.

![Stack Example](https://raw.githubusercontent.com/alexander-schranz/itcss/main/images/stack.png)

### Inline

Classes: `o-inline`, `o-inline-{spacing}`, `o-inline-{spacingX}-{spacingY}`

An inline object defines the horizontal and vertical space between flexible 

objects.

![Inline Example](https://raw.githubusercontent.com/alexander-schranz/itcss/main/images/inline.png)

### Bleed

Classes: `o-bleed`, `o-bleed-none`

A bleed allows breaking out of a container to its full size.

[TODO Picture]

## TODO

### Media (TODO)

![Media Example](https://raw.githubusercontent.com/alexander-schranz/itcss/main/images/media.png)

### Grid (TODO)

![Grid Example](https://raw.githubusercontent.com/alexander-schranz/itcss/main/images/grid.png)