Skip to content

Instantly share code, notes, and snippets.

@VinSpee

VinSpee/tailwind.config.js

Created January 30, 2023 20:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VinSpee/fec689c11f32757329fae73e866c10c8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VinSpee/fec689c11f32757329fae73e866c10c8 to your computer and use it in GitHub Desktop.
Download ZIP
tailwind config
Raw
tailwind.config.js
const plugin = require('tailwindcss/plugin');
const spacing = {
auto: 'auto',
px: '1px',
0.5: '2px',
0: '0px',
1: '4px',
1.5: '6px',
2: '8px',
2.5: '10px',
3: '12px',
4: '16px',
4.5: '20px',
5: '24px',
5.5: '28px',
6: '32px',
6.5: '36px',
7: '40px',
8: '48px',
8.5: '52px',
9: '56px',
10: '64px',
10.25: '68px',
10.5: '72px',
11: '80px',
12: '96px',
12.25: '100px',
13: '128px',
14: '144px',
15: '160px',
16: '176px',
17: '192px',
18: '208px',
19: '224px',
20: '240px',
21: '256px',
22: '288px',
23: '320px',
24: '384px',
25: '458px',
full: '100%',
'2xs': '320px',
xs: '480px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
};
const colors = {
black: '#070708',
white: '#ffffff',
purple: {
100: '#F2F6FF',
200: '#DFE3FD',
300: '#CACBFE',
400: '#ADA7FD',
500: '#907BFF',
600: '#7564CF',
700: '#6251BB',
800: '#40357D',
900: '#1E2236',
1000: '#151A30',
},
green: {
50: '#EAFBF8',
100: '#D5F6F2',
200: '#AAEEE5',
300: '#80E5D8',
400: '#56DCCA',
500: '#2DD4BF',
600: '#00B887',
700: '#00997A',
800: '#007D6C',
900: '#004A45',
},
gray: {
100: '#FFFFFF',
200: '#EDF1F7',
300: '#E4E9F2',
400: '#C5CEE0',
500: '#8F9BB3',
600: '#546183',
700: '#2E3A59',
800: '#252A42',
900: '#1A242F',
1000: '#111820',
},
pink: {
100: '#FDF2F8',
200: '#FCE7F3',
300: '#F9A8D4',
400: '#F472B6',
500: '#EC4899',
600: '#DB2777',
700: '#BE185D',
800: '#9D174D',
900: '#831843',
},
red: {
100: '#FFF2F2',
200: '#FFD6D9',
300: '#FFA8B4',
400: '#FB7185',
500: '#F43F5E',
600: '#E11D48',
700: '#BE123C',
800: '#9F1239',
900: '#881337',
},
current: 'currentColor',
transparent: 'transparent',
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./node_modules/flowbite-react/**/*.js',
'./src/**/*.{js,ts,jsx,tsx,html}',
'./pages/**/*.{js,ts,jsx,tsx,html}',
'./components/**/*.{js,ts,jsx,tsx,html}',
],
theme: {
colors,
spacing,
maxWidth: spacing,
maxHeight: spacing,
width: spacing,
height: spacing,
minHeight: spacing,
minWidth: spacing,
gap: spacing,
fontSize: {
xxs: ['12px', 1.5],
xs: ['14px', 1.4285714286],
sm: ['14px', 1.7142857143],
base: ['16px', 1.5],
lg: ['18px', 1.5555555556],
'h-2xs': ['14px', 1.4285714286],
'h-xs': ['16px', 1.5],
'h-sm': ['20px', 1.4],
'h-md': ['24px', 1.3333333],
'h-lg': ['32px', 1.25],
'h-xl': ['40px', 1.3],
'h-2xl': ['48px', 1.3043478261],
'b-sm': ['14px', 1.1428571429],
'b-base': ['16px', 1.5],
'b-lg': ['14px', 1.1428571429],
label: ['12px', 1.5],
overline: ['10px', 1.6],
},
extend: {
typography: {
DEFAULT: {
css: {
color: '#8F9BB3',
fontWeight: 500,
fontSize: '16px',
lineHeight: '24px',
h1: {
color: colors.gray[100],
fontSize: '24px',
lineHeight: '32px',
fontWeight: 600,
},
h2: {
color: colors.gray[100],
fontSize: '20px',
lineHeight: '28px',
fontWeight: 600,
},
h3: {
color: colors.gray[100],
fontSize: '16px',
lineHeight: '24px',
fontWeight: 600,
},
h4: {
color: colors.gray[100],
fontSize: '16px',
lineHeight: '24px',
fontWeight: 600,
},
h5: {
color: colors.gray[100],
fontSize: '16px',
lineHeight: '24px',
fontWeight: 600,
},
h6: {
color: colors.gray[100],
fontSize: '16px',
lineHeight: '24px',
fontWeight: 600,
},
strong: {
color: colors.gray[500],
fontWeight: 700,
},
em: {
color: colors.gray[500],
fontWeight: 500,
fontStyle: 'italic',
fontSize: '16px',
lineHeight: '24px',
},
s: {
color: colors.gray[500],
fontWeight: 500,
fontStyle: 'italic',
textDecorationLine: 'line-through',
fontSize: '16px',
lineHeight: '24px',
},
a: {
fontWeight: 500,
color: colors.gray[400],
textDecorationLine: 'underline',
fontSize: '16px',
lineHeight: '24px',
},
blockquote: {
color: colors.gray[500],
fontSize: '16px',
lineHeight: '24px',
},
ul: {
li: {
fontWeight: 500,
color: colors.gray[500],
fontSize: '16px',
lineHeight: '24px',
paddingLeft: 0,
},
},
ol: {
li: {
fontWeight: 500,
color: colors.gray[500],
fontSize: '16px',
lineHeight: '24px',
paddingLeft: 0,
},
},
img: {
margin: spacing[5],
float: 'left',
borderRadius: '8px',
},
},
},
small: {
css: {
color: '#8F9BB3',
fontWeight: 500,
fontSize: '14px',
lineHeight: '24px',
h1: {
color: colors.gray[100],
fontSize: '20px',
lineHeight: '28px',
fontWeight: 600,
},
h2: {
color: colors.gray[100],
fontSize: '16px',
lineHeight: '24px',
fontWeight: 600,
},
h3: {
color: colors.gray[100],
fontSize: '14px',
lineHeight: '20px',
fontWeight: 600,
},
h4: {
color: colors.gray[100],
fontSize: '14px',
lineHeight: '20px',
fontWeight: 600,
},
h5: {
color: colors.gray[100],
fontSize: '14px',
lineHeight: '20px',
fontWeight: 600,
},
h6: {
color: colors.gray[100],
fontSize: '14px',
lineHeight: '20px',
fontWeight: 600,
},
strong: {
color: colors.gray[500],
fontWeight: 700,
},
em: {
color: colors.gray[500],
fontWeight: 500,
fontStyle: 'italic',
fontSize: '14px',
lineHeight: '24px',
},
s: {
color: colors.gray[500],
fontWeight: 500,
fontStyle: 'italic',
textDecorationLine: 'line-through',
fontSize: '14px',
lineHeight: '24px',
},
a: {
fontWeight: 500,
color: colors.gray[400],
textDecorationLine: 'underline',
fontSize: '14px',
lineHeight: '24px',
},
blockquote: {
color: colors.gray[500],
fontSize: '14px',
lineHeight: '24px',
},
ul: {
li: {
fontWeight: 500,
color: colors.gray[500],
fontSize: '14px',
lineHeight: '24px',
},
ol: {
fontWeight: 500,
color: colors.gray[500],
fontSize: '14px',
lineHeight: '24px',
},
},
img: {
margin: spacing[5],
float: 'left',
borderRadius: '8px',
},
},
},
},
gridColumn: {
'span-13': 'span 13 / span 13',
'span-14': 'span 14 / span 14',
},
gridTemplateColumns: {
14: 'repeat(14, minmax(0, 1fr))',
},
gridTemplateRows: {
'sticky-top': 'auto 1fr',
'sticky-bottom': '1fr auto',
},
gridColumnEnd: {
14: '14',
},
gridColumnStart: {
14: '14',
},
gridRowStart: {
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
},
gridRowEnd: {
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
},
opacity: {
8: '.08',
16: '.16',
24: '.24',
32: '.32',
48: '.48',
64: '.64',
72: '.72',
80: '.8',
88: '.88',
96: '.96',
100: '1',
},
boxShadow: {
inset: 'inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05)',
'inner-px': 'inset 0 0 2px 0 var(--tw-shadow-color)',
'border-solid': '0 0 0 1px var(--tw-shadow-color)',
},
width: {
'video-1': '640px',
'course-progress': '520px',
},
height: {
'video-1': '480px',
'course-preview': '35rem',
},
minHeight: {
'upload-1': '20rem',
},
maxWidth: {
'course-progress': '520px',
},
borderWidth: {
2.5: '2.5px',
},
fontWeight: {
'inherit': 'inherit',
},
},
},
variants: {
lineClamp: ['responsive', 'hover'],
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('tailwindcss-font-inter'),
require('@headlessui/tailwindcss'),
// TOOD: remove flowbite from project, this is causing overrides on tailwind theme
// require('flowbite/plugin'),
plugin(({ addVariant }) => {
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scroll-button', '&::-webkit-scrollbar-button');
addVariant('scroll-thumb', '&::-webkit-scrollbar-thumb');
addVariant('scroll-track', '&::-webkit-scrollbar-track');
addVariant('scroll-piece', '&::-webkit-scrollbar-track-piece');
addVariant('scroll-corner', '&::-webkit-scrollbar-corner');
addVariant('scroll-resizer', '&::-webkit-scrollbar-resizer');
addVariant('last-of-type', '&:last-of-type');
addVariant('progress-bar', '&::-webkit-progress-bar');
addVariant('progress-value', '&::-webkit-progress-value');
}),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment