Vue Storefront
You can check out more about it here:
Storefront UI
Vue Storefront uses by default a really useful UI Library called Storefront UI. It was designed based on Google for Retail report and specifically for E-Commerce. It is really customizable and allows to accelerate the development of your e-commerce application by a mile!
Storefront UI
You can read more about it here:
Adding TailwindCSS to VSF
As Vue Storefront uses Nuxt.js under the hood, the process of adding it to your project is relatively simple. Especially with the recent release of a new version of Tailwind Module for Nuxt that you can check the code here. In this version, you do not need to register tailwind config nor postcss config in your nuxt application in order to make it work. How briliant is that?
In order to install the Tailwind module in Vue Storefront application we need to run:
yarn add @nuxtjs/tailwindcss # npm install @nuxtjs/tailwindcss
Then, we need to register it in the modules array of our nuxt.config.js file:
modules: [
// Other modules
'@nuxtjs/tailwindcss'
],
Finally, to test if it works, we can add some Tailwind styles to our wrapper component:
<div id="home" class="bg-blue-300">
And this should be a result:
Demo
Summary
Well done! You have successfuly added TailwindCSS to your Vue Storefront project. Keep in mind however, that Storefront UI wasn't designed to work with TailwindCSS out of the box so in order to replace the styles you would have to adjust several CSS variables and this process is described here