christianwiedemann
commented
2 years ago Hi, hm actually functions are working. But yes I think we should replace that library.
I just paste a sample config from another project. Maybe this helps?
const forms = require('@tailwindcss/forms');
const colors = require('tailwindcss/colors');
const typography = require('@tailwindcss/typography')({
modifiers: ['lg'],
});
const round = (num) =>
num
.toFixed(7)
.replace(/(\.[0-9]+?)0+$/, '$1')
.replace(/\.0$/, '');
const em = (px, base) => `${round(px / base)}em`;
const rem = (px) => `${px / 16}rem`.replace(' ', '');
module.exports = {
mode: 'jit',
important: false,
darkMode: 'class',
purge: ['./safelist.txt', './source/**/*.twig', './source/**/*.yml', './apps/**/*.twig'],
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
teal: colors.teal,
red: colors.rose,
yellow: colors.amber,
gray: {
50: '#00000029',
100: '#1A191929',
200: '#1A191966',
300: '#707070',
400: '#5D5D5D',
500: '#1A1919',
},
green: {
500: '#00AA93',
},
orange: {
200: '#FFCDAB',
500: '#FF9052',
},
blue: {
100: '#C3E0F1',
200: '#6B94CA',
300: '#007BC4',
400: '#246F9D',
500: '#19608B',
},
pink: {
500: '#BE2768',
},
},
fontSize: {
xs: [rem(14), rem(24)],
sm: [rem(16), rem(24)],
base: [rem(18), rem(40)],
lg: [rem(24), rem(28.8)],
xl: [rem(28), rem(43.2)],
'2xl': [rem(32), rem(24)],
'3xl': [rem(40), rem(40)],
},
spacing: {
px: '1px',
0: '0px',
0.5: rem(2),
1.25: rem(5),
1.75: rem(7),
2.5: rem(10),
3: rem(12),
3.5: rem(14),
4: rem(16),
5: rem(20),
6: rem(24),
6.25: rem(25),
7.5: rem(30),
8: rem(32),
8.75: rem(35),
10: rem(40),
11.25: rem(45),
12.5: rem(50),
14: rem(56),
15: rem(60),
15.75: rem(63),
16.25: rem(65),
16.75: rem(67),
17.5: rem(70),
18: rem(72),
18.5: rem(75),
20: rem(80),
22.5: rem(90),
24: rem(96),
25: rem(100),
29.5: rem(118),
30: rem(120),
36: rem(150),
42.5: rem(170),
50: rem(200),
64: rem(256),
128: rem(512),
180: rem(720),
195: rem(780),
205: rem(820),
225: rem(900),
270: rem(1080),
320: rem(1280),
480: rem(1920),
35: rem(35),
26: rem(26),
full: '100%',
},
extend: {
typography: (theme) => ({
DEFAULT: {
css: [
{
color: theme('colors.gray.900'),
maxWidth: 'none',
'h1, [class~="h1"]': {
fontWeight: 300,
fontSize: theme('fontSize.3xl[0]'),
marginBottom: theme('spacing.5'),
fontFamily: `${theme('fontFamily.neue')}`,
},
'h2, [class~="h2"]': {
fontWeight: 300,
fontSize: theme('fontSize.2xl[0]'),
marginBottom: theme('spacing.5'),
fontFamily: `${theme('fontFamily.neue')}`,
},
'h3, [class~="h3"]': {
fontWeight: 300,
fontSize: theme('fontSize.xl[0]'),
marginBottom: theme('spacing.5'),
fontFamily: `${theme('fontFamily.neue')}`,
},
'h4, [class~="h4"]': {
fontWeight: 300,
fontSize: theme('fontSize.lg[0]'),
fontFamily: `${theme('fontFamily.neue')}`,
},
'h5, [class~="h5"]': {
fontWeight: 700,
fontSize: theme('fontSize.lg[0]'),
fontFamily: `${theme('fontFamily.neue')}`,
},
'h6, [class~="h6"]': {
fontWeight: 400,
fontSize: theme('fontSize.sm[0]'),
fontFamily: `${theme('fontFamily.neue')}`,
},
p: {
fontWeight: 300,
marginBottom: theme('spacing.5'),
},
'figure figcaption': {
color: theme('colors.gray.500'),
fontWeight: 300,
marginTop: theme('spacing.6'),
},
blockquote: {
fontStyle: 'normal',
borderLeftWidth: '0',
marginTop: '0',
marginBottom: '0',
paddingLeft: '0',
},
// To use fa icons on li elements, we need to override the default styling of unordered lists, because
// tailwind adds a pseudo :before element to every ul > li element
// In a second step we revert this when no 'fa-' class is present
'ul > li::before': {
background: 'unset',
content: null,
width: null,
height: null,
top: `calc(${em(28 / 2, 16)} - ${em(6, 16)})`,
left: 0,
},
'ul > li:not([class*="fa-"])': {
paddingLeft: em(30, 16),
},
'ul > li:not([class*="fa-"])::before': {
position: 'absolute',
content: '""',
backgroundColor: '#000',
borderRadius: '50%',
width: em(6, 16),
height: em(6, 16),
top: `calc(${em(28 / 2, 16)} - ${em(3, 16)})`,
left: em(4, 16),
},
},
],
},
dark: {
css: {
color: theme('colors.gray.100'),
'[class~="lead"]': {
color: theme('colors.gray.100'),
},
blockquote: {
color: theme('colors.gray.100'),
},
strong: {
color: theme('colors.gray.100'),
},
h2: {
color: theme('colors.gray.100'),
},
h3: {
color: theme('colors.gray.100'),
},
h4: {
color: theme('colors.gray.100'),
},
a: {
color: theme('colors.gray.100'),
'&:hover': {
color: theme('colors.gray.100'),
},
},
},
},
}),
fill: {
current: 'currentColor',
},
height: {
18: '4.5rem',
},
maxWidth: {
none: 'none',
'7xl': '100rem',
'8xl': '120rem',
},
gridTemplateColumns: {
'33/66': '33% 66%',
'66/33': '66% 33%',
'25/50/25': '25% 50% 25%',
},
},
fontFamily: {
lato: ['Lato'],
},
},
variants: {
opacity: ['responsive'],
borderWidth: ['responsive', 'hover', 'group-hover', 'last'],
backgroundColor: ['responsive', 'hover', 'group-hover'],
gradientColorStops: ['active', 'hover', 'group-hover'],
textDecoration: ['responsive', 'hover', 'group-hover'],
textColor: ['responsive', 'hover', 'group-hover', 'dark'],
fontFamily: ['responsive', 'hover', 'focus'],
fill: ['responsive', 'hover', 'focus'],
spacing: ['responsive', 'last'],
typography: ['responsive', 'dark'],
},
plugins: [forms, typography],
};
woldtwerk
https://github.com/wingsuit-designsystem/wingsuit/blob/be21181a5738cd28c9d1ff148b45b43f6bd3a209/presets/tailwind/src/plugins/Tailwind2JsonPlugin.ts#L30
Hi there, the jsondiffpatch packages doesn't support functions. A tailwind.config can contain functions though. It throws an error and cancels the webpack process.
e.g.:
Also the package seems kinda abandoned. Maybe we can find an alternative.