Skip to content

Instantly share code, notes, and snippets.

@RohitM-IN
Created June 8, 2023 16:54
Show Gist options
  • Save RohitM-IN/19773c8709fb68aa1cf95d3964e603d5 to your computer and use it in GitHub Desktop.
Save RohitM-IN/19773c8709fb68aa1cf95d3964e603d5 to your computer and use it in GitHub Desktop.
Template for theming
const defaultTheme = require('tailwindcss/defaultTheme');
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./hooks/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
inter: ['Inter', ...defaultTheme.fontFamily.sans],
},
colors: {
'primary': '#1555ED',
'success': '#00A74F',
'warning': '#f19938',
'danger': '#fb4922',
'accent': '#F8F8F8',
'neutral': '#F1F2F3',
'neutral-2': '#212121',
'secondary': '#636363',
'secondary-2': '#F0EFF4',
'secondary-3': '#8E8E91',
'secondary-4': '#242424',
// 'brand-accent': '#F2F8E9',
// 'secondary-accent': '#f4f6fa',
// 'danger': '#f1416c',
},
},
},
plugins: [
require('@tailwindcss/forms'),
plugin(({ addVariant, e }) => {
addVariant("sidebar-expanded", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.sidebar-expanded .${e(
`sidebar-expanded${separator}${className}`
)}`
);
});
}),
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment