unable to add typography plugin

[vesper8]

In my tailwind.config.js if I add

nightwind: {
      typography: true,
    },

under the theme key, it blows up right away with this error

Syntax Error: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)
    at new Promise (<anonymous>)


 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 4:14-417 15:3-20:5 16:22-425
 @ ./src/App.vue?vue&type=style&index=0&lang=css&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.2.173:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

If I leave the nightwind: {} but comment out typography: true then no error..

[jjranalli]

This is a weird one. If you're using a prefix maybe try removing it to see if the error goes away, as the issue may be related to it.

In the meantime, it would help if you could share your full tailwind.config.js or provide me a repo to reproduce the issue. Thanks!

[vesper8]

This is my full tailwind.config.js file

/* eslint-disable global-require */

const map = require('lodash/map');
const isPlainObject = require('lodash/isPlainObject');

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

module.exports = {
  prefix: '',
  important: true,
  mode: 'jit',
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: 'media',
  theme: {
    // nightwind: {
    //   typography: true,
    // },    
    extend: {
      textColor: {
        skin: {
          base: withOpacity('--color-text-base'),
          muted: withOpacity('--color-text-muted'),
          inverted: withOpacity('--color-text-inverted'),
        },
      },
      backgroundColor: {
        skin: {
          fill: withOpacity('--color-fill'),
          'button-accent': withOpacity('--color-button-accent'),
          'button-accent-hover': withOpacity('--color-button-accent-hover'),
          'button-muted': withOpacity('--color-button-muted'),
        },
      },
      gradientColorStops: {
        skin: {
          hue: withOpacity('--color-fill'),
        },
      },
      backgroundImage: theme => ({
        'mesh-gradient': "url('~@/assets/img/mesh-gradient.png')",
      }),
      typography: (theme) => ({
        light: {
          css: [
            {
              color: theme('colors.gray.400'),
              '[class~="lead"]': {
                color: theme('colors.gray.300'),
              },
              a: {
                color: theme('colors.white'),
              },
              strong: {
                color: theme('colors.white'),
              },
              'ol > li::before': {
                color: theme('colors.gray.400'),
              },
              'ul > li::before': {
                backgroundColor: theme('colors.gray.600'),
              },
              hr: {
                borderColor: theme('colors.gray.200'),
              },
              blockquote: {
                color: theme('colors.gray.200'),
                borderLeftColor: theme('colors.gray.600'),
              },
              h1: {
                color: theme('colors.white'),
              },
              h2: {
                color: theme('colors.white'),
              },
              h3: {
                color: theme('colors.white'),
              },
              h4: {
                color: theme('colors.white'),
              },
              'figure figcaption': {
                color: theme('colors.gray.400'),
              },
              code: {
                color: theme('colors.white'),
              },
              'a code': {
                color: theme('colors.white'),
              },
              pre: {
                color: theme('colors.gray.200'),
                backgroundColor: theme('colors.gray.800'),
              },
              thead: {
                color: theme('colors.white'),
                borderBottomColor: theme('colors.gray.400'),
              },
              'tbody tr': {
                borderBottomColor: theme('colors.gray.600'),
              },
            },
          ],
        },
      }),
    },
    screens: {
      xxs: { max: '360px' },
      xs: { min: '361px' },
      sm: { min: '640px' },
      md: { min: '768px' },
      lg: { min: '1024px' },
      xl: { min: '1280px' },
    },
  },
  variants: {
    extend: {
      typography: ['dark'],
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwindcss-filters'),
    // require("nightwind"),
    ({
      addUtilities, e, theme, variants,
    }) => {
      const utilities = map(theme('gradients', {}), (gradient, name) => {
        const type = isPlainObject(gradient) && gradient.hasOwnProperty('type') ? gradient.type : 'linear';
        const colors = isPlainObject(gradient) ? gradient.colors || [] : gradient;

        return {
          [`.bg-${e(name)}`]: {
            background: `${type}-gradient(${colors.join(', ')})`,
          },
        };
      });

      addUtilities(utilities, variants('gradients', []));
    },
  ],
};

[jjranalli]

Unfortunately I wasn't able to reproduce the issue, your tailwind config is not causing conflicts in my case and Nightwind is working as expected with Typography. I just had to comment require('@tailwindcss/ui') as I think it's not supported in Tailwind ^2.0.

Let me know if you manage to nail down the issue on your end, or feel free to provide me with a reproducible repo so I can debug it