A tailwind plugin for shorter absolute and fixed positioning, supporting tailwind spacing.

Installation

Install the plugin as dev dependency from npm:

npm install -D @katerlouis/atl

Then add the plugin to your main style.css file:

@import "@katerlouis/tailwind-atl";

If you are using tailwind 3, there is also a javascript version. Use it like this

// talwind.config.js
import tailwindAtlPlugin from '@katerlouis/tailwind-absolute-awesomeness'

export default {
  // ... other configuration
  plugins: [
    // ... other plugins
    tailwindAtlPlugin,
  ], 
}

Basic usage

Letter 1 is for position: a = absolute f = fixed

Letter 2 is for vertical alignment t = sets top b = sets bottom

Letter 3 is for horizontal alignment l = sets left r = sets right

Example

<button class="atl">
  I am absolute on top 0 and left 0
</button>

You can also use tailwinds spacing!

<button class="fbr-5">
  Awesome, I am fixed to the bottom right with tailwind spacing of 5
<button>

Centration

Additional utilities for centering using the transform translate method:

• absolute-center
• absolute-center-top
• absolute-center-right
• absolute-center-bottom
• absolute-center-left
• fixed-center

Feedback

Please feel free to jump into the issues or discussions with feedback both for the project setup and the actual tailwind code.

Thanks!