Get a custom design system with IntelliSense.

[xzfd1010]

I want to generate a complete design system that doesn’t extend Tailwind’s defaults, at the same time, I'd like to use
IntelliSense for VS Code to improve development experience.
While using vscode plugins, I don't need the default tailwind classNames like 'row-end-1'.

What I need is just the classNames generated by my own config file.
According to the document, I set preset as [], and import my own preset as following:

preset.js

module.exports = {
    presets: [],
    corePlugins: [
        'textColor',
        'borderRadius',
        'fontWeight',
        'backgroundColor',
        'borderColor',
        'flex'
    ],
    theme: {
        screens: {},
        spacing: {
            'xxs': '2px',
            'xs': '5px',
            's': '7px',
            'm': '10px',
            'l': '15px',
            'xl': '20px',
            'row': '17px'
        },
        borderRadius: {
            's': '2px',
            'm': '4px',
            'l': '8px',
            'xl': '12px',
            'circle': '100%',
        },
        fontWeight: {
            regular: 'normal',
            medium: '500',
        },
        borderColor: {
            DEFAULT: 'rgba(0,0,0,0.03)',
            dark: 'rgba(255,255,255,0.03)',
        },
    },
    variants: {
        textColor: [],
        backgroundColor: [],
        borderColor: [],
        borderRadius: []
    }
  }

taiwind.config.js

module.exports = {
    presets:[
        require('./preset')
    ],
}

When I run npx tailwind build, it compiles with error.

At the same time, the vscode plugin reports the same error.

The reason for the error is that Object.entries(values) does not judge if values is an empty object.

let modifierValues = Object.entries(values);

Could you please fix it?

[olets]

You can get the result you want by moving the definitions in your presets file to main config file and removing the presets: []. Defining theme.<plugin> rather than theme.extend.<plugin> wipes out the default config for <plugin>, and any core plugins not in corePlugins are disabled.

This does not directly address the error you're seeing, but it does work around it.

https://play.tailwindcss.com/3H8rZGnLM6

[xzfd1010]

Thank you for your attention.
I tried you solution. It works in the browser but it seems not to work in my vscode. The plugin still shows irrelevant classnames as following.

This is the tailwind config file.

module.exports = {
    // change: commented out the following line
    // presets: [],
    corePlugins: [
      'textColor',
      'borderRadius',
      'fontWeight',
      'backgroundColor',
      'borderColor',
      'flex',
    ],
    theme: {
      screens: {},
      spacing: {
        xxs: '2px',
        xs: '5px',
        s: '7px',
        m: '10px',
        l: '15px',
        xl: '20px',
        row: '17px',
      },
      borderRadius: {
        s: '2px',
        m: '4px',
        l: '8px',
        xl: '12px',
        circle: '100%',
      },
      fontWeight: {
        regular: 'normal',
        medium: '500',
      },
      borderColor: {
        DEFAULT: 'rgba(0,0,0,0.03)',
        dark: 'rgba(255,255,255,0.03)',
      },
    },
    variants: {
      textColor: [],
      backgroundColor: [],
      borderColor: [],
      borderRadius: [],
    },
  }