tailwindcss.config.js

const { CardColumns } = require("react-bootstrap");

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {
      maxWidth: {
        '4/5': '80%',
      },
      width: {
        '1/11': '9.09090909%',
        '2/11': '18.18181818%',
        '3/11': '27.27272727%',
        '4/11': '36.36363636%',
        '5/11': '45.45454545%',
        '6/11': '54.54545454%',
        '7/11': '63.63636363%',
        '8/11': '72.72727272%',
        '9/11': '81.81818181%',
        '10/11': '90.90909090%',

        '1/9': '11.1111111%',
        '2/9': '22.2222222%',
        '3/9': '33.3333333%',
        '4/9': '44.4444444%',
        '5/9': '55.5555555%',
        '6/9': '66.6666666%',
        '7/9': '77.7777777%',
        '8/9': '88.8888888%',
        'ct/w': '400px',
      },
      height: {
        '1/9': '11.1111111%',
        '2/9': '22.2222222%',
        '3/9': '33.3333333%',
        '4/9': '44.4444444%',
        '5/9': '55.5555555%',
        '6/9': '66.6666666%',
        '7/9': '77.7777777%',
        '8/9': '88.8888888%',
        '9/9': '99.9999999%',

        'fullcalc': 'calc( 100% - 3.75rem)',
        'quaterscreen': '85vh',
        'ct/h': '500px',

        '9/11': '81.81818181%',
        '10/11': '90.90909090%',
      },
      right:{
        'ct/r': '55px',
      },
      backgroundColor: {
        'red': '#FF0000',
        'orange': '#FFA500',
        'yellow': '#FFFF00',
        'green': '#008000',
        'blue': '#0000FF',
        'blue-500': '#4299e1',
        'cyan': '#00FFFF',
        'lime': '#00FF00', 
        'purple': '#800080',
      },
      textColor:{
        'red': '#FF0000',
        'orange': '#FFA500',
        'yellow': '#FFFF00',
        'green': '#008000',
        'blue': '#0000FF',
        'blue-500': '#4299e1',
        'cyan': '#00FFFF',
        'lime': '#00FF00', 
        'purple': '#800080',
      },
    }
  },
  variants: {},
  plugins: [],
}