Request: Working project example

[ilteris]

Hello, Thank you for this plugin. I couldn't get this working in my project. I would appreciate a working example to compare. Thank you.

[jamessessford]

Hi @ilteris - What kind of project are you using this plugin in and what is your build process for your css?

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            textShadow: {
                default: '-1px 2px 0px rgba(0, 0, 0, 0.35)',
                light: '-1px 2px 0px rgba(0, 0, 0, 0.15)',
                sm: '0 2px 2px rgba(0, 0, 0, 0.5)',
                md: '0 2px 4px rgba(0, 0, 0, 0.5)',
                lg: '0 2px 8px rgba(0, 0, 0, 0.5)',
                xl: '0 2px 10px rgba(0, 0, 0, 0.5)'
            },
            height: {
                128: '32rem'
            },
            inset: {
                4: '1rem',
                8: '2rem',
                12: '3rem',
                16: '4rem',
                48: '12rem',
                64: '16rem',
                72: '20rem',
                128: '32rem'
            },
            minHeight: {
                12: '3rem',
                48: '12rem',
                64: '16rem',
                72: '20rem',
                128: '32rem'
            },
            width: {
                '1/8': '12.5%',
                '2/8': '25%',
                '3/8': '37.5%',
                '4/8': '50%',
                '5/8': '62.5%',
                '6/8': '75%',
                '7/8': '87.5%',
                '8/8': '100%',
                36: '14rem',
                72: '20rem',
                128: '32rem',
                256: '64rem'
            },
            textStyles: theme => ({ // defaults to {}
                heading: {
                  output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
                  fontWeight: theme('fontWeight.bold'),
                  lineHeight: theme('lineHeight.tight'),
                },
                h1: {
                  extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
                  fontSize: theme('fontSize.5xl'),
                  '@screen sm': {
                    fontSize: theme('fontSize.6xl'),
                  },
                },
                h2: {
                  extends: 'heading',
                  fontSize: theme('fontSize.4xl'),
                  '@screen sm': {
                    fontSize: theme('fontSize.5xl'),
                  },
                },
                h3: {
                  extends: 'heading',
                  fontSize: theme('fontSize.4xl'),
                },
                h4: {
                  extends: 'heading',
                  fontSize: theme('fontSize.3xl'),
                },
                h5: {
                  extends: 'heading',
                  fontSize: theme('fontSize.2xl'),
                },
                h6: {
                  extends: 'heading',
                  fontSize: theme('fontSize.xl'),
                },
                link: {
                  fontWeight: theme('fontWeight.bold'),
                  color: theme('colors.blue.400'),
                  '&:hover': {
                    color: theme('colors.blue.600'),
                    textDecoration: 'underline',
                  },
                },
                richText: {
                  fontWeight: theme('fontWeight.normal'),
                  fontSize: theme('fontSize.base'),
                  lineHeight: theme('lineHeight.relaxed'),
                  '> * + *': {
                    marginTop: '1em',
                  },
                  'h1': {
                    extends: 'h1',
                  },
                  'h2': {
                    extends: 'h2',
                  },
                  'h3': {
                    extends: 'h3',
                  },
                  'h4': {
                    extends: 'h4',
                  },
                  'h5': {
                    extends: 'h5',
                  },
                  'h6': {
                    extends: 'h6',
                  },
                  'ul': {
                    listStyleType: 'disc',
                  },
                  'ol': {
                    listStyleType: 'decimal',
                  },
                  'a': {
                    extends: 'link',
                  },
                  'b, strong': {
                    fontWeight: theme('fontWeight.bold'),
                  },
                  'i, em': {
                    fontStyle: 'italic',
                  },
                },
              }),
        },
        ripple: theme => ({
            colors: theme('colors')
        }),
        pulse: theme => ({
            colors: theme('colors')
        })
    },
    variants: { },
    plugins: [
        require('tailwindcss-pulse')(),
        require('tailwindcss-ripple')(),
        require('tailwindcss-typography')(),
        require('@tailwindcss/custom-forms'),
    ]
}

The file above is a tailwind config file for a project I'm working on that I'm using the plugin in.

I hope this helps and if not, please let me know :)

[jamessessford]

Hi @ilteris - I'm going to close the issue off but if you need any further help, please let me know!