@office365rackspace/helix-tailwind v1.0.4

Documentation

For full HelixUI documentation, visit helixdesignsystem.github.io.

For full Tailwind CSS documentation, visit tailwindcss.com.

:rocket: Getting Started

1. Install helix-style via npm

npm i @office365/helix-tailwind

2. Add to your CSS file

@import "~@office365rackspace/helix-tailwind";

3. Use default Tailwind CSS utility classes or custom Helix utilites

// React
<button className="hxBtn hxPrimary bg-magenta-900">Test</button>

:books: How It Works

1. The base stylesheet, src/compile.css, imports the Helix UI stylesheet

@import "~helix-ui/dist/css/helix-ui.min.css";

2. It also imports Tailwind CSS utilities

@import "tailwindcss/utilities";

3. Additionally, we override the default Tailwind CSS configuration to expose custom, Helix-themed utility classes

const merge = require('lodash.merge');
const defaultConfig = require('tailwindcss/defaultConfig');
const helixConfig = require('./src/stubs/helix.config');


module.exports = merge(defaultConfig, helixConfig);

4. When processed with postcss, via npm run build, the outputted stylesheet dist/output.css contains the Helix UI classes plus the Tailwind CSS utility classes (with the custom, Helix themed utility classes)

5. @import "~@office365rackspace/helix-tailwind" will import the outputted stylesheet for consumers of this package

Contributors