Tailwind Grid

Basic CSS Grid-system for Tailwind-based architecture

A basic CSS Grid-system built with Tailwind directives and Sass rules.

Installation

$ npm install --saved-dev tailwind-grid

Usage

@import '~tailwind-grid/lib/main';

<div class="row">
  <div class="col-12 sm:col-6">
    
  </div>
  <div class="col-12 sm:col-6">
    
  </div>
</div>

Core file

Located in lib/main.scss

.row {
  min-width: 100%;
  display: flex;
  flex-flow: row wrap;
  @apply -mx-4;

  @responsive {
    &--collapse {
      @apply mx-0;
    }
  }
}

[class*="col-"] {
  width: 100%;
  min-height: 1px;
  @apply px-4;

  @responsive {
    .row.row--collapse > & {
      @apply px-0;
    }
  }
}

@responsive {
  @for $i from 1 through 12 {
    .col-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
}

License

MIT