@yet3/tailwindcss-bg-patterns

IN-DEVELOPMENT

Copied code!
npm install --save-dev @yet3/tailwindcss-bg-patterns

Available patterns

  1. Horizontal lines
  2. Vertical lines
  3. Grid
  4. Checkers
  5. Hatching
  6. Cross-Hatching
  7. Polka dot
  8. Hexagonal polka dot

  1. Horizontal lines

    Configuration classes:

    • .bg-pattern-line
      • -2

        Lines width

      • -[321]

        Custom lines width (in px without unit)

      • -red-500

        Lines colors

      • -[#a8a8a8]

        Custom lines color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20"></div>

  2. Vertical lines

    Configuration classes:

    • .bg-pattern-line
      • -2

        Lines width

      • -[321]

        Custom lines width (in px without unit)

      • -red-500

        Lines colors

      • -[#a8a8a8]

        Custom lines color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32"></div>

  3. Grid

    Configuration classes:

    • .bg-pattern-line
      • -2

        Lines width

      • -[321]

        Custom lines width (in px without unit)

      • -red-500

        Lines colors

      • -[#a8a8a8]

        Custom lines color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"></div>

  4. Checkers

    Configuration classes:

    • .bg-pattern-square
      • -2

        Squares width

      • -[321]

        Custom squares width (in px without unit)

      • -red-500

        Squares colors

      • -[#a8a8a8]

        Custom squares color

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32"></div>

  5. Hatching

    Configuration classes:

    • .bg-pattern-line
      • -2

        Lines width

      • -[321]

        Custom lines width (in px without unit)

      • -red-500

        Lines colors

      • -[#a8a8a8]

        Custom lines color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-hatching
      • -left-to-right

        Start hatching from top left

      • -right-to-left

        Start hatching from top right

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right"></div>

  6. Cross-Hatching

    Configuration classes:

    • .bg-pattern-line
      • -2

        Lines width

      • -[321]

        Custom lines width (in px without unit)

      • -red-500

        Lines colors

      • -[#a8a8a8]

        Custom lines color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-hatching
      • -left-to-right

        Start hatching from top left

      • -right-to-left

        Start hatching from top right

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16"></div>

  7. Polka dot

    Configuration classes:

    • .bg-pattern-dot
      • -2

        Dots width

      • -[321]

        Custom dots width (in px without unit)

      • -red-500

        Dots colors

      • -[#a8a8a8]

        Custom dots color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32"></div>

  8. Hexagonal polka dot

    Configuration classes:

    • .bg-pattern-dot
      • -2

        Dots width

      • -[321]

        Custom dots width (in px without unit)

      • -red-500

        Dots colors

      • -[#a8a8a8]

        Custom dots color

    • .bg-pattern-spacing
      • -2

        Spacing

      • -[321]

        Custom spacing (in px without unit)

    • .bg-pattern-offset-x
      • -2

        Offset x

      • -[321px]

        Custom offset x

    • .bg-pattern-offset-y
      • -2

        Offset x

      • -[321px]

        Custom offset x

    Copied code!
    <div class="bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32"></div>