Web UI Development with Vue, Tailwind CSS and Storybook
I recently got an idea for a web application and started to work on its front end user interface. Being a backend developer for years, with only sporadic experience on UI development, I decided to document my experience.
Vue.js as JavaScript Framework
After having a look at the popular UI frameworks, I decided to use Vue.js for its simplicity and excellent documentation. I also had a look at Nuxt.js and was excited with what it brings on top of Vue. So I tried creating Vue projects, using both the Vue and Nuxt CLIs and just to get a feel of the working environment.
Tailwind CSS as UI Framework
From previous experience, I knew that I will need a style toolkit like Bootstrap, as I have no desire to style my components from raw CSS. While trying out the Nuxt project creation, I noticed that there’s quite a lot of UI frameworks to choose from!
I was already familiar with Bootstrap, but I decided to have a look at each of the listed frameworks. My interested was piqued when I had a look at Tailwind CSS, especially its core concept of “utility first”, i.e. “building complex components from a constrained set of primitive utilities”. I also like how easy it allows to make mobile-first, responsive design. This approach allows newbie UI developers like me to quickly style components without thinking too much about CSS.
UI Component Development with Storybook
While reading about the various Nuxt plugins, I stumbled upon Storybook. Basically it’s a tool that allows UI developers to build and test UI components in isolation. After seeing how it works, I knew that I can’t keep writing UI code without it!
Incompatibilities
At this point I felt that I finally have the trifecta for my web UI development environment: Vue/Nuxt, Tailwind CSS, and Storybook.
Considering that Vue 3 is already out, I wanted to use it but, as of this writing, it seems that Nuxt nor Tailwind CSS do not support it yet, so I had to stick with Vue 2. Also, perhaps due to my inexperience regarding all these JavaScript tooling (esp. webpack and CSS preprocessors), I was never able to make Storybook and Tailwind CSS work together as Nuxt plugins!
Thinking that I’d be better off without the extra layer of complexity from using Nuxt and its plugins, I decided to simply use the Vue CLI which produces are rather bare-bones scaffolding, which I hoped would be easier for me to understand.
After a few days of reading online documentations and looking at answers on Stack Overflow, I finally figured out a setup that works, which I’ll describe in the next secion.
Putting it all together
Vue.js Installation
First we need to install Vue 2. I’m using Vue CLI 4.5.12 to create the project scaffolding.
I prefer to manually select the supported features rather than just babel and eslint. I then added Router, Vuex, CSS Pre-processors, Linter/Formatter, Unit Testing, just in case I’ll need them later.
Tailwind CSS Installation
Installing Tailwind CSS is easy. First add it to the project node modules:
Then, as Tailwind CSS uses PostCSS, add a file called postcss.config.js in the my-vue-app folder. I’m using the Visual Studio Code as my code editor.
The above code adds Tailwind CSS and autoprefixer as plugins to PostCSS. As you can see, the formatter in Visual Studio Code is not quite happy with our JavaScript code format, so we can also take this opportunity to change the Prettier configuration to use only single quotes and no semicolons after each JavaScript statement by adding this in the package.json file:
With that, those formatting warnings should disappear. Finally, don’t forget to commit these code changes into git.
Oh, and we also need to generate the Tailwind CSS configuration file.
Storybook Installation
We will install Storybook as a Vue plugin:
This adds a vue-cli-plugin-storybook in the package.json file, and also creates the config/storybook and stories folders.
Running the web application
To run a development server that we can use to view the web app that we’re working on:
Running Storybook
To start using Storybook, simply do: npm run storybook:serve.
Making a new UI component
Now we have everything to start making new UI components. First we need to create a CSS file that we can import to use the Tailwind framework, say, src/assets/css/tailwind.css
Note that aside from inserting Tailwind’s base, components, and utilities styles, I could also use it to set global styles, in this case setting the background to a light pink color using Tailwind’s bg-pink-200 class.
I then create a new component like this:
And its corresponding story in Storybook:
This new component is now visible in Storybook:
Note that both global (the pink background from tailwind.css) and local styles have been applied to the MyHeader component. We can then safely integrate this component into the web application UI.
Suppose we add the MyHeader component directly into App.vue,
The result would look like this:
While the position of the Vue logo was impacted, we can see that as far as the MyHeader component is concerned, everything works as expected!
Conclusion
I’ve shown how to setup a web application UI development environment using Vue 2, Tailwind CSS and Storybook. It really helps me to have confidence in every UI component that I create. Storybook has many awesome features that I did not discuss here.
I hope you find this post useful and feel free to comment and share your feedback and other ideas.