Add tailwind CSS

README.md

Follow here:

https://gist.github.com/vdelacou/58484f1c11af70aaa457f4e5c289e893#file-readme-md

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install @craco/craco

npm uninstall react-scripts

npx json -I -f package.json -e 'this.scripts={...this.scripts , "start": "craco start" }'
npx json -I -f package.json -e 'this.scripts={...this.scripts , "build": "craco build" }'
npx json -I -f package.json -e 'this.scripts={...this.scripts , "test": "craco test" }'

curl -o craco.config.js https://gist.githubusercontent.com/vdelacou/884c1d905c4dbeb819c5c84d17126e5d/raw/craco.config.js
curl -o tailwind.config.js https://gist.githubusercontent.com/vdelacou/884c1d905c4dbeb819c5c84d17126e5d/raw/tailwind.config.js
curl -o jest.config.js https://gist.githubusercontent.com/vdelacou/884c1d905c4dbeb819c5c84d17126e5d/raw/jest.config.js
npx json -I -f tsconfig.json -e 'this.include=["src", "craco.config.js", "tailwind.config.js", "jest.config.js"] '

curl -o src/index.css https://gist.githubusercontent.com/vdelacou/884c1d905c4dbeb819c5c84d17126e5d/raw/index.css

npm install @vtmn/css-utilities @vtmn/css-design-tokens @vtmn/icons typeface-roboto typeface-roboto-condensed

echo "import '@vtmn/css-design-tokens/dist/index.css';" | cat - src/index.tsx > temp && mv temp src/index.tsx echo "import '@vtmn/css-utilities/dist/index.css';" | cat - src/index.tsx > temp && mv temp src/index.tsx echo "import '@vtmn/icons/dist/vitamix/font/vitamix.css';" | cat - src/index.tsx > temp && mv temp src/index.tsx echo "import 'typeface-roboto';" | cat - src/index.tsx > temp && mv temp src/index.tsx echo "import 'typeface-roboto-condensed';" | cat - src/index.tsx > temp && mv temp src/index.tsx

craco.config.js

/* eslint-disable */
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply min-h-screen bg-grey-light-4;
  }
}

jest.config.js

/* eslint-disable */
const { createJestConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.js");
const jestConfig = createJestConfig(cracoConfig);

module.exports = jestConfig;

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    fontFamily: {
      sans: ['Roboto', 'system-ui', '-apple-system', 'sans-serif'],
      serif: ['Roboto', 'system-ui', '-apple-system', 'sans-serif'],
      mono: ['Roboto', 'system-ui', '-apple-system', 'sans-serif'],
    },
    extend: {
      colors: {
        brand: 'var(--vtmn-color_brand)',
        'brand-pro': 'var(--vtmn-color_brand-pro)',
        'brand-digital': {
          'light-1': 'var(--vtmn-color_brand-digital-light-1)',
          'light-2': 'var(--vtmn-color_brand-digital-light-2)',
          'light-3': 'var(--vtmn-color_brand-digital-light-3)',
          DEFAULT: 'var(--vtmn-color_brand-digital)',
          'dark-1': 'var(--vtmn-color_brand-digital-dark-1)',
          'dark-2': 'var(--vtmn-color_brand-digital-dark-2)',
        },
        green: {
          'light-1': 'var(--vtmn-color_green-light-1)',
          'light-2': 'var(--vtmn-color_green-light-2)',
          'light-3': 'var(--vtmn-color_green-light-3)',
          DEFAULT: 'var(--vtmn-color_green)',
          'dark-1': 'var(--vtmn-color_green-dark-1)',
          'dark-2': 'var(--vtmn-color_green-dark-2)',
        },
        white: 'var(--vtmn-color_white)',
        grey: {
          'light-1': 'var(--vtmn-color_grey-light-1)',
          'light-2': 'var(--vtmn-color_grey-light-2)',
          'light-3': 'var(--vtmn-color_grey-light-3)',
          'light-4': 'var(--vtmn-color_grey-light-4)',
          DEFAULT: 'var(--vtmn-color_grey)',
          'dark-1': 'var(--vtmn-color_grey-dark-1)',
          'dark-2': 'var(--vtmn-color_grey-dark-2)',
          'dark-3': 'var(--vtmn-color_grey-dark-3)',
        },
        black: 'var(--vtmn-color_black)',
        success: 'var(--vtmn-color_success)',
        info: 'var(--vtmn-color_info)',
        warning: 'var(--vtmn-color_warning)',
        danger: 'var(--vtmn-color_danger)',
        yellow: {
          'light-1': 'var(--vtmn-color_yellow-light-1)',
          'light-2': 'var(--vtmn-color_yellow-light-2)',
          DEFAULT: 'var(--vtmn-color_yellow)',
        },
        orange: {
          'light-1': 'var(--vtmn-color_orange-light-1)',
          'light-2': 'var(--vtmn-color_orange-light-2)',
          DEFAULT: 'var(--vtmn-color_orange)',
        },
        red: {
          'light-1': 'var(--vtmn-color_red-light-1)',
          'light-2': 'var(--vtmn-color_red-light-2)',
          DEFAULT: 'var(--vtmn-color_red)',
        },
      },
      fontFamily: {
        normal: ['Roboto', 'system-ui', '-apple-system', 'sans-serif'],
        condensed: ['Roboto Condensed', 'system-ui', '-apple-system', 'sans-serif'],
        display: ['Roboto Condensed', 'system-ui', '-apple-system', 'sans-serif'],
        body: ['Roboto', 'system-ui', '-apple-system', 'sans-serif'],
      },
    },
    variants: {
      extend: {},
    },
    plugins: [],
  },
};