tailwind.config.js (3335B)
1 /** 2 * The basics: 3 * 1. purge will search classes and remove unused CSS when built in production mode 4 * 2. important will add specificity. Setting this to true will enforce it. The current strategy 5 * should be fine as it is, but if someone else uses tailwind with 'important: true' and they don't scape 6 * it could interfere with our class names. If that becomes an issue (I think low chance...), we can add 7 * a prefix: https://tailwindcss.com/docs/configuration#prefix 8 **/ 9 10 module.exports = { 11 // mode: 'jit', 12 purge: ['src/**/*'], 13 important: '.extendify-sdk', 14 darkMode: false, 15 theme: { 16 screens: { 17 xxs: '280px', 18 xs: '480px', 19 sm: '600px', 20 md: '782px', 21 md2: '960px', // admin sidebar auto folds 22 lg: '1080px', // adminbar goes big 23 xl: '1280px', 24 '2xl': '1440px', 25 '3xl': '1600px', 26 '4xl': '1920px', 27 }, 28 // Extend will add on to TW config, where the above will override and replace 29 extend: { 30 minWidth: { 31 md2: '960px', 32 }, 33 minHeight: { 34 60: '15rem', 35 }, 36 fontSize: { 37 '3xl': ['2rem', '2.5rem'], 38 }, 39 colors: { 40 extendify: { 41 lightest: '#f8fffe', 42 light: '#e7f8f5', 43 main: '#008160', 44 link: '#299875', 45 bright: '#30a850', 46 }, 47 'wp-theme': { 48 // It's a Tailwind convention for the base color to use 500 then build off that 49 500: 'var(--wp-admin-theme-color)', 50 600: 'var(--wp-admin-theme-color-darker-10)', 51 700: 'var(--wp-admin-theme-color-darker-20)', 52 }, 53 wp: { 54 alert: { 55 yellow: '#f0b849', 56 red: '#cc1818', 57 green: '#4ab866', 58 }, 59 }, 60 gray: { 61 50: '#fafafa', 62 100: '#f0f0f0', 63 150: '#eaeaea', // This wasn't a variable but I saw it on buttons 64 200: '#e0e0e0', // Used sparingly for light borders. 65 300: '#dddddd', // Used for most borders. 66 400: '#cccccc', 67 500: '#cccccc', // WP didn't have a 500 value for some reason so I just copied the 400 68 600: '#949494', // Meets 3:1 UI or large text contrast against white. 69 700: '#757575', // Meets 4.6:1 text contrast against white. 70 900: '#1e1e1e', 71 }, 72 }, 73 zIndex: { 74 high: '99999', 75 max: '2147483647', // Highest the browser allows - don't block WP re-auth modal though 76 }, 77 }, 78 }, 79 variants: { 80 extend: { 81 borderWidth: ['group-hover', 'hover', 'focus'], 82 backgroundColor: ['active'], 83 textColor: ['active'], 84 }, 85 }, 86 plugins: [ 87 require('@tailwindcss/aspect-ratio'), 88 ], 89 corePlugins: { 90 preflight: false, 91 container: false, 92 }, 93 }