tailwind-easy v1.0.3

Tailwind Easy

Base on

https://tailwindcss.com

Use the default configs

import React from "react";
import {Div} from "tailwind-easy";

export default props => {
  return (
    <Div flex items-center justify-center w-full>
        <Div bg-blue-200 text-light text-2xl m-8 p-8 flex justify-center rounded>
          <Div text-red-400>
            hello word
          </Div>
        </Div>
    </Div>
  )
}

Usign custom theme

import React from "react";
import {Div, TailwindEasyProvider} from "tailwind-easy";
import * as theme from "{theme path}";

export default props => {
  return (
    <TailwindEasyProvider theme={theme}>
      <Div flex items-center justify-center w-full>
        <Div bg-primary md-bg-blue-200 lg-bg-warning text-light text-2xl m-8 p-8 flex justify-center rounded>
          <Div text-danger>
            hello word
          </Div>
        </Div>
      </Div>
     </TailwindEasyProvider>
  )
}

Theme example

const colors = {
  'primary': '#01ae10',
  'secondary': '#343a40',
  'success': '#15d1b4',
  'error': '#ee1d3a',
  'info': '#17a2b8',
  'warning': '#F35300',
  'default': '#000000',
  'danger': '#ee1d3a',
  'light': '#f8f9fa',
  'dark': '#000000',
  'secondaryLight': '#9b9b9b',
  'theme-color-interval': '0.8',
};

export {
  colors
};

Use the a custom config

    ...
    <TailwindEasyProvider theme={theme} config={}>
    ...

Example of config file

import variantsConst from "./Utils/variantsConst";

export default {
  important: false,
  variants: {
    accessibility: [variantsConst.RESPONSIVE, variantsConst.FOCUS],
    alignContent: [variantsConst.RESPONSIVE],
    alignItems: [variantsConst.RESPONSIVE],
    alignSelf: [variantsConst.RESPONSIVE],
    appearance: [variantsConst.RESPONSIVE],
    backgroundAttachment: [variantsConst.RESPONSIVE],
    backgroundColor: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    backgroundPosition: [variantsConst.RESPONSIVE],
    backgroundRepeat: [variantsConst.RESPONSIVE],
    backgroundSize: [variantsConst.RESPONSIVE],
    borderCollapse: [variantsConst.RESPONSIVE],
    borderColor: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    borderRadius: [variantsConst.RESPONSIVE],
    borderStyle: [variantsConst.RESPONSIVE],
    borderWidth: [variantsConst.RESPONSIVE],
    boxShadow: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    cursor: [variantsConst.RESPONSIVE],
    display: [variantsConst.RESPONSIVE],
    fill: [variantsConst.RESPONSIVE],
    flex: [variantsConst.RESPONSIVE],
    flexDirection: [variantsConst.RESPONSIVE],
    flexGrow: [variantsConst.RESPONSIVE],
    flexShrink: [variantsConst.RESPONSIVE],
    flexWrap: [variantsConst.RESPONSIVE],
    float: [variantsConst.RESPONSIVE],
    fontFamily: [variantsConst.RESPONSIVE],
    fontSize: [variantsConst.RESPONSIVE],
    fontSmoothing: [variantsConst.RESPONSIVE],
    fontStyle: [variantsConst.RESPONSIVE],
    fontWeight: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    height: [variantsConst.RESPONSIVE],
    inset: [variantsConst.RESPONSIVE],
    justifyContent: [variantsConst.RESPONSIVE],
    letterSpacing: [variantsConst.RESPONSIVE],
    lineHeight: [variantsConst.RESPONSIVE],
    listStylePosition: [variantsConst.RESPONSIVE],
    listStyleType: [variantsConst.RESPONSIVE],
    margin: [variantsConst.RESPONSIVE],
    maxHeight: [variantsConst.RESPONSIVE],
    maxWidth: [variantsConst.RESPONSIVE],
    minHeight: [variantsConst.RESPONSIVE],
    minWidth: [variantsConst.RESPONSIVE],
    objectFit: [variantsConst.RESPONSIVE],
    objectPosition: [variantsConst.RESPONSIVE],
    opacity: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    order: [variantsConst.RESPONSIVE],
    outline: [variantsConst.RESPONSIVE, variantsConst.FOCUS],
    overflow: [variantsConst.RESPONSIVE],
    padding: [variantsConst.RESPONSIVE],
    placeholderColor: [variantsConst.RESPONSIVE, variantsConst.FOCUS],
    pointerEvents: [variantsConst.RESPONSIVE],
    position: [variantsConst.RESPONSIVE],
    resize: [variantsConst.RESPONSIVE],
    stroke: [variantsConst.RESPONSIVE],
    tableLayout: [variantsConst.RESPONSIVE],
    textAlign: [variantsConst.RESPONSIVE],
    textColor: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    textDecoration: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    textTransform: [variantsConst.RESPONSIVE],
    userSelect: [variantsConst.RESPONSIVE],
    verticalAlign: [variantsConst.RESPONSIVE],
    visibility: [variantsConst.RESPONSIVE],
    whitespace: [variantsConst.RESPONSIVE],
    width: [variantsConst.RESPONSIVE],
    wordBreak: [variantsConst.RESPONSIVE],
    zIndex: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    animation: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
    animationDuration: [variantsConst.RESPONSIVE, variantsConst.HOVER, variantsConst.FOCUS],
  }
}