Sitecore Headless SXA Tailwind Grid-Only

grid.css

@tailwind utilities;

.offset-0 {
  margin-left: 0;
}

.offset-1 {
  margin-left: 8.33333%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.offset-11 {
  margin-left: 91.66667%;
}

@media (width >= 640px) {
  .sm\:offset-0 {
    margin-left: 0;
  }

  .sm\:offset-1 {
    margin-left: 8.33333%;
  }

  .sm\:offset-2 {
    margin-left: 16.66667%;
  }

  .sm\:offset-3 {
    margin-left: 25%;
  }

  .sm\:offset-4 {
    margin-left: 33.33333%;
  }

  .sm\:offset-5 {
    margin-left: 41.66667%;
  }

  .sm\:offset-6 {
    margin-left: 50%;
  }

  .sm\:offset-7 {
    margin-left: 58.33333%;
  }

  .sm\:offset-8 {
    margin-left: 66.66667%;
  }

  .sm\:offset-9 {
    margin-left: 75%;
  }

  .sm\:offset-10 {
    margin-left: 83.33333%;
  }

  .sm\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 768px) {
  .md\:offset-0 {
    margin-left: 0;
  }

  .md\:offset-1 {
    margin-left: 8.33333%;
  }

  .md\:offset-2 {
    margin-left: 16.66667%;
  }

  .md\:offset-3 {
    margin-left: 25%;
  }

  .md\:offset-4 {
    margin-left: 33.33333%;
  }

  .md\:offset-5 {
    margin-left: 41.66667%;
  }

  .md\:offset-6 {
    margin-left: 50%;
  }

  .md\:offset-7 {
    margin-left: 58.33333%;
  }

  .md\:offset-8 {
    margin-left: 66.66667%;
  }

  .md\:offset-9 {
    margin-left: 75%;
  }

  .md\:offset-10 {
    margin-left: 83.33333%;
  }

  .md\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1024px) {
  .lg\:offset-0 {
    margin-left: 0;
  }

  .lg\:offset-1 {
    margin-left: 8.33333%;
  }

  .lg\:offset-2 {
    margin-left: 16.66667%;
  }

  .lg\:offset-3 {
    margin-left: 25%;
  }

  .lg\:offset-4 {
    margin-left: 33.33333%;
  }

  .lg\:offset-5 {
    margin-left: 41.66667%;
  }

  .lg\:offset-6 {
    margin-left: 50%;
  }

  .lg\:offset-7 {
    margin-left: 58.33333%;
  }

  .lg\:offset-8 {
    margin-left: 66.66667%;
  }

  .lg\:offset-9 {
    margin-left: 75%;
  }

  .lg\:offset-10 {
    margin-left: 83.33333%;
  }

  .lg\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1280px) {
  .xl\:offset-0 {
    margin-left: 0;
  }

  .xl\:offset-1 {
    margin-left: 8.33333%;
  }

  .xl\:offset-2 {
    margin-left: 16.66667%;
  }

  .xl\:offset-3 {
    margin-left: 25%;
  }

  .xl\:offset-4 {
    margin-left: 33.33333%;
  }

  .xl\:offset-5 {
    margin-left: 41.66667%;
  }

  .xl\:offset-6 {
    margin-left: 50%;
  }

  .xl\:offset-7 {
    margin-left: 58.33333%;
  }

  .xl\:offset-8 {
    margin-left: 66.66667%;
  }

  .xl\:offset-9 {
    margin-left: 75%;
  }

  .xl\:offset-10 {
    margin-left: 83.33333%;
  }

  .xl\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1536px) {
  .\32xl\:offset-0 {
    margin-left: 0;
  }

  .\32xl\:offset-1 {
    margin-left: 8.33333%;
  }

  .\32xl\:offset-2 {
    margin-left: 16.66667%;
  }

  .\32xl\:offset-3 {
    margin-left: 25%;
  }

  .\32xl\:offset-4 {
    margin-left: 33.33333%;
  }

  .\32xl\:offset-5 {
    margin-left: 41.66667%;
  }

  .\32xl\:offset-6 {
    margin-left: 50%;
  }

  .\32xl\:offset-7 {
    margin-left: 58.33333%;
  }

  .\32xl\:offset-8 {
    margin-left: 66.66667%;
  }

  .\32xl\:offset-9 {
    margin-left: 75%;
  }

  .\32xl\:offset-10 {
    margin-left: 83.33333%;
  }

  .\32xl\:offset-11 {
    margin-left: 91.66667%;
  }
}

tailwind.config.js

module.exports = {
  content: ['./null'], // fake directory to suppress warning of no content paths defined
  // only safelist the classes needed for Sitecore grid usage
  safelist: [
    {
      pattern: /^basis-./,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^grow$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^order-./,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(hidden|inline|inline-block|block)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(table|table-row|table-cell)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(flex|inline-flex)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(ml|mr)-0$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(ml|mr|mx)-auto$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^self-(center|end|start)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};