Vue-storefront: [Docs] CSS framework integration - e.g. Tailwind CSS

[kkdg]

What is the motivation for adding / enhancing this feature?

Tutorial or cookbook on integration with 3rd party CSS frameworks.

What are the acceptance criteria

• [ ] Docs should give users a guide to follow using easy-to-follow steps

Can you complete this feature request by yourself?

• [x] YES, this is a reminder for myself
• [ ] NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [x] This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [ ] (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Additional information

Thank you for reading

[simonmaass]

Tailwind would be great

[jbool24]

Sass is great but I would love to see how to get tailwind integrated instead so I can stay out of "css brain mode" and focused totally are structuring elements in a theme.

[kkdg]

It's already implemented here https://github.com/AbsoluteWebServices/vuetique-theme by AbsoluteWeb. This issue deals with compatibility issue with 1.11 upgrade.

[simonmaass]

@kkdg well it is customizing core files... not ideal i guess

[jbool24]

@kkdg well it is customizing core files... not ideal i guess
👍

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx'
  ],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

const postcssConfig = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('tailwindcss'),
      require('postcss-flexbugs-fixes'),
      require('autoprefixer')({
        flexbox: 'no-2009'
      }),
      ...process.env.NODE_ENV === 'production'
        ? [purgecss]
        : []
    ]
  }
};

Exactly correct and what I would like to avoid. Monkey-patching like the above in the core webpack.base.config.ts will work it in but means remembering to re-patch later in a local implementation once the core gets moved into its own npm package. I'm trying to do it all through the theme and webpack extend workflow. As far as I know the config object passed into the theme webpack does not provide a hook onto the rules object.