Tailwind Configuration

README.md

‎‎​

Components.md

Custom Components

Tailwind gives you a few ways to organize your components. Check out this file

• Add them to a css file in a layer
• Add them to the tailwind.config.css file
• Create custom classes in your vue components
• Make sure to have added any css files that you are using to your nuxt config.
  • Also create an assets/ directory at the root of your project to store the css files.
• nuxt.config.js css declaration

css: [
  '@/assets/css/tailwind.css',
  '@/assets/css/main.sass'
]

---

@layer, base, and utilities

• This doc article on tailwind functions and directives covers how to use this syntax and more. Review the other core concepts for more information as well
• Use of @layer {} in your css file allows your to add your own content to tailwind's base styles, utility classes, and components.

base styles

• Especially useful for fonts
• You can refer to fonts declared in your config, or fonts imported through a cdn (add an import statement to the css file)
• base styles should be used for html elements

@layer base {
  h1 {
    @apply text-3xl font-body font-bold;
  }
}

utilities

• Create custom utility classes
• To create these, use regular css instead of @apply
• Just like base styles, this will compile and add your utilities to your project's utility classes

@layer utilities {
  .scroll-snap-none: {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

• This example would provide 3 utility classes that are variations of the same thing
• Note that you can use tailwind classes in utilities, but it's better to do that with @apply components

components

• Complex components should be created with your markup, such as creating a Card.vue file and specifically stylizing the card there.
• However tailwind is flexible and works with many approaches
• The documentation recommends only using small frequently reused component classes without connection to html markup globaly.
• This example is a set of basic button styles

@apply components {
  .btn {
    @apply font-bold uppercase text-xs px-4 py-2 rounded-full shadow hover:shadow-md ease-linear transition-all duration-150;
  }
  .btn-purple {
    @apply bg-purple-400 text-white hover:bg-purple-600;
  }
}

• This will give you a btn component that handles it's basic size and shape, inner text defaults, and animations.
• It also gives a purple variation that also handles the hover color

---

Tailwind + Vue Component Organization Workflow

Tailwind uses the underlying logic that components are inherently css and html. That's why it uses utility classes. This approach works well with vue components as you can create components of any level of scope from a large section such as a Header.vue or a smaller component such as a Button.vue or CardTitle.vue.

• To avoid code duplication, your css final setup will likely involve:
  • a bunch of different reusable vue components
  • a bunch of global css components that are customized in your vue files
    • ie: declare a global .btn class that uses a bunch of utilities, then tweak it in your vue files

Tailwind Design workflow

1. Plan out your vue components
2. Draft your tailwind styles directly in the markup of your components
3. Create global components out of any tailwind styled components that are reused often
   • These can be semantic or utility focused, it depends on your preferences
4. Remove redundant code and clean up your components
   • Use @apply in the <style> tag of your vue files to create component specific styles
   • Add global components to either your tailwind config, or a globally accessible css file (ie: assets/style/tailwind.css)

• It comes down to what works best for you. The files in this gist demonstrate the methods mentioned above.

Fonts.md

Fonts

You can import fonts in a few different ways.

Nuxt

• Import the google fonts into your project. Check out this doc
• declare the fonts and respective weights in your nuxt.config.js file

Tailwind

• Add the fonts to your tailwind.config.js file in the fontFamily
  • Note that to set the default sans and serif fonts, add them to the front of their respective arrays in your tailwind config. Note that this will just change what the default font is

fontFamily: {
  sans:['montserrat', 'sans-serif']
}

• You can add more fonts and custom names by declaring them like:

extend: {
  fontFamily: {
    body: ['montserrat', 'sans-serif'],
    display: ['oswald', 'sans-serif']
  }
}

Use one of the two approaches to set your font stylings

• Then to set the default styles for headings etc in one of the two:

Create a plugin for base styles in the tailwind config

• You can addBase settings for all your fonts here

  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.3xl'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.bold')},
      })
    })
  ]

Create a css file to declare your base styles

• Check out the tailwind docs for adding base styles
• The tailwind font-family doc is helpful for syntax

@layer base {
  h1 {
    @apply text-2xl font-sans;
  }
}

nuxt.config.js

// in your nuxt config, import the google fonts
export default {
  css: [
    // These filenames are arbitrary, add your css files here
    '@/assets/css/tailwind.css',
    '@/assets/css/main.sass'
  ],
  // You can add fonts to your project here. It's advisable to get the nuxt google fonts module
  googleFonts: {
    families: {
      // a simple name
      roboto: true,

      // a name with spaces
      'Roboto+Slab': true,

      // specific font weights
      'Montserrat': [400, 500, 600, 700],
    }
  }
}

tailwind.config.js

module.exports = {
  purge: [],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    spacing: {
      px: '1px',
      0: '0px',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
    boxShadow: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      none: 'none',
    },
    // Call the fonts into your tailwind file
    fontFamily: {
      sans: ['montserrat', 'sans-serif', 'ui-sans-serif'],
      serif: ['serif', 'ui-serif'],
      mono: ['"Liberation Mono"', 'monospace'],
      'montserrat': ['Montserrat'],
      'roboto-slab': ['Roboto+Slab']
    },
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    fontWeight: {
      thin: '100',
      extralight: '200',
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '800',
      black: '900',
    }
  },
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.4xl'), fontFamily:theme('fontFamily.bebas') },
        'h2': { fontSize: theme('fontSize.3xl'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.bold')},
        'h3': { fontSize: theme('fontSize.2xl'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.semibold') },
        'h4': { fontSize: theme('fontSize.xl'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.semibold') },
        'button': { fontSize: theme('fontSize.lg'), fontFamily: theme('sans.montserrat'), },
        'p': { fontSize: theme('fontSize.base'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.regular') },
        'a': { fontSize: theme('fontSize.base'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.regular') },
        'li': { fontSize: theme('fontSize.base'), fontFamily: theme('sans.montserrat'), fontWeight: theme('fontWeight.regular') },
      })
    })
  ]
}

tailwind.css

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

/* Define base styles here */
@layer base {
  h1 {
    @apply text-2xl font-body font-bold
  }
  p {
    @apply text-lg font-body;
  }
}

/* Create your own utility classes in here */
@layer utilities {
  .flex-container-col {
    display: flex;
    flex-direction: column;
  }
}

/* Create global custom css components here */
@apply components {
.btn {
    @apply 
    font-bold
    uppercase
    text-xs
    px-4
    py-2
    rounded-full
    shadow
    hover:shadow-md
    outline-none
    focus:outline-none
    mr-1
    mb-1
    ease-linear
    transition-all
    duration-150
  }
  .btn-purple {
    @apply
    bg-purple-500
    hover:bg-purple-600
    text-white;
  }
}