Individual borders

[paul-vd]

I am struggling to find out why individual borders are not working.

I have been experiencing this since their release, on create-react-app and nextjs.

when i try to use a simple example, nothing apears:

border-b-2 border-blue-500

i am forced to be explicit which is kind of link and annoying forcing me to go and make my own border bottom classes:

border-solid border-t-0 border-l-0 border-r-0 border-b-2 border-blue-500

here is my setup in nextjs:

// postcss.config.js

module.exports = {
  plugins: ['tailwindcss', 'postcss-focus-visible', 'autoprefixer']
}

// tailwind.config.js

/**
 * default config from https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 * we also use `tailwind.js` because the default of `babel-plugin-macros` set this file as a tailwind default config.
 */

module.exports = {
  important: true,
  purge: ['src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'media', // 'media' or 'class'
  theme: {
    extend: {
      colors: {
        black: {
          DEFAULT: '#000000',
          100: '#d2d2d2',
          200: '#a5a5a5',
          300: '#787878',
          400: '#4b4b4b',
          500: '#1e1e1e',
          600: '#181818',
          700: '#121212',
          800: '#0c0c0c',
          900: '#060606',
        },
        success: {
          DEFAULT: '#0070F3',
          lighter: '#d3e5ff',
          light: '#3291FF',
          dark: '#0761D1',
        },
        error: {
          DEFAULT: '#E00',
          lighter: '#F7D4D6',
          light: '#FF1A1A',
          dark: '#C50000',
        },
        warning: {
          DEFAULT: '#F5A623',
          lighter: '#FFEFCF',
          light: '#F7B955',
          dark: '#AB570A',
        },
        accent: {
          background: '#ffffff',
          1: '#FAFAFA',
          2: '#EAEAEA',
          3: '#999999',
          4: '#888888',
          5: '#666666',
          6: '#444444',
          7: '#333333',
          8: '#111111',
          foreground: '#000000',
        },
        inherit: 'inherit',
        boxShadow: {
          card: '0px 0px 42.217px rgba(166, 163, 163, 0.25)',
          'dropdown-box': '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
          sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
          md: '0 8px 30px rgba(0, 0, 0, 0.12)',
          lg: '0 30px 60px rgba(0, 0, 0, 0.12)',
        },
        maxWidth: {
          screen: '100vw',
          half: '50%',
        },
      },
      borderRadius: {
        base: '5px',
      },
      minWidth: {
        screen: '100vw',
        half: '50%',
        'half-screen': '50vw',
      },
      minHeight: {
        screen: '100vh',
        half: '50%',
        'half-screen': '50vh',
      },
      width: (theme, { breakpoints }) => ({
        ...breakpoints(theme('screens')),
        screen: '100vw',
      }),
      container: {
        center: true,
        padding: {
          default: '16pt',
        },
      },
    },
    screens: {
      xs: '480px',
      sm: '650px',
      md: '900px',
      lg: '1280px',
      xl: '1920px',
    },
  },
  plugins: [require('@tailwindcss/forms')],
  variants: {
    extend: {
      borderColor: ['group-hover', 'focus-visible'],
      borderRadius: ['group-hover'],
      textDecoration: ['focus-visible'],
      ringWidth: ['focus', 'focus-visible'],
    },
    container: [],
  },
}

[adamwathan]

Can I see your CSS file? If you aren't including @tailwind base then you will need to add border-solid, as our reset styles are what make it possible to just add the border width and have the border show up.

[paul-vd]

🤦 Thanks that seems to be it, i removed the base because i'm mixing with antd styles but yea that resolves it, thanks!

[tiboradam]

I don't get it. I have a vue app and have exactly the same behaviour with borders.

I have the standard assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

What did I set up inproperly?

[adamwathan]

If you can share a reproduction I can look, it must be something else as based on the information you've provided it should work.

[tiboradam]

What a reaction time, Adam! I can't keep up with you! :)

As for the reproduction.. well, I've created a barebone project the same way (I think) and I don't have the same issue there.
I appreciate your help (or the intention), but it seems I have to dig deeper on my side..