In this article, I am gonna help you config your vue.js application to start using tailwind classes in your components.
- Tailwind is a CSS framework that has lots of predefined styles for us to design faster.
If you don't have Vue CLI installed in your system, install it using npm. (Visit this website to download npm and node)
$ npm install -g @vue/cli
Now, let’s create a new vue.js app using
vue create <app-name>
$ vue create vuejs-tailwind-app
You will be prompted with the following, select vue2 or vue3 whichever version you are comfortable with, and press Enter.
After your app is successfully created, go to the folder and run the app using
npm run serve
$ cd vuejs-tailwind
$ npm run serve
By default, Vue app runs on localhost in port 8080
Click on the link http://localhost:8080/ to view our app.
Now, let's install the dependencies required to work with Tailwind.
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Then, to generate config files, type the following command
$ npx tailwindcss init -p
Open your app in your favorite editor.
- In the tailwind.config.js file,
purge: [‘./index.html’, ‘./src/**/*.vue,js,ts,jsx,tsx}’]
- Under the src folder create index.css and add the following.
/* ./src/index.css */
- In the
main.jsfile, import index.css
Congratulations! You can now start applying tailwind styles in your Vue.js app.
If you want to use styled form fields in your app, you have to install the module separately.
npm install @tailwindcss/forms
Then, in tailwind.config.js, add
require('@tailwindcss/forms') for plugins.
Now we shall try creating a simple login page, with three components: navbar, login container, and a footer.
Now that we have all the components ready, let’s import these into our App.vue
Run the app and go to http://localhost:8080 on your browser.
Now it’s your time to put your own twist on your app with easily usable tailwind classes.