Published on

6 Easy Ways To Build A Vue Notification message With Tailwind CSS Without Even Thinking About It

Tags
CardsWidget
Vue Notification message

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Vue Notification message ui component

Simple notification message using vue.js

Why use Tailwind CSS to build a Vue Notification message ui component?

  • It can make the building process of Vue Notification message ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Vue Notification message component file.

The preview of Vue Notification message ui component

Free download of the Vue Notification message's source code

The source code of Vue Notification message ui component

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <div class="font-bold text-xl py-4">Notification Center</div>
    <notification-message>Good morning</notification-message>
    <notification-message type="error" header="Oh no!">
      <p>Your flight has been <b>canceled</b>!</p>
    </notification-message>

    <notification-message type="success" header="Oh yeah!">
      <p>Your flight is on time.</p>
    </notification-message>
  </div>
</body>

<script src="https://unpkg.com/vue"></script>

<script type="text/x-template" id="notification-message-template">
  <div v-if="hidden === false">
    <!-- Switch based on type -->
    <div class="container border-2" :class="renderByType">
  
      <div class="flex items-stretch py-2">
        <span class="flex-auto font-bold text-lg">{{ this.header }}</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="flex-end mr-4 h-6 w-6" fill="none" viewBox="0 0 24 24"
          stroke="currentColor" @click="hide">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </div>
      <p>
        <slot></slot>
      </p>
    </div>
  </div>
</script>

<script>
  Vue.component("notification-message", {
    template: '#notification-message-template',
    props: {
      type: {
        type: String,
        default: "warning"
      },
      header: {
        type: String,
        default: "Oh whatever!"
      },
    },
    computed: {
      renderByType: function () {
        let r = this.type === 'error' ? 'border-red-100 bg-red-50 text-red-800' :
          this.type === 'warning' ? 'border-yellow-100 bg-yellow-50 text-yellow-800' :
            'border-green-100 bg-green-50 text-green-800';
        //console.log(r);
        return r;
      }
    },
    data() {
      return {
        hidden: false
      };
    },
    methods: {
      hide() {
        this.hidden = true;
      }
    }
  })
  new Vue({
      el: '#app',
      data: {

      }
    })
</script>

</html>

How to build a Vue Notification message with Tailwind CSS?

Install tailwind css of verion 2.1.4

Use the script html tag to import the script of Tailwind CSS of the version 2.1.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to build a Vue Notification message component

  • text-xl
  • py-4
  • border-2
  • flex
  • py-2
  • flex-auto
  • text-lg
  • flex-end
  • mr-4
  • h-6
  • w-6

11 steps to build a Vue Notification message component with Tailwind CSS

  1. Control the text color of an element to xl using the text-xl utilities.

  2. Control the vertical padding of an element to 1rem using the py-4 utilities.

  3. Control the border color of an element to 0.5rem using the border-2 utilities.

  4. Use flex to create a block-level flex container.

  5. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  6. Use flex to create a block-level flex container.

  7. Control the text color of an element to lg using the text-lg utilities.

  8. Use flex to create a block-level flex container.

  9. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  10. Use h-6 to set an element to a fixed height(1.5rem).

  11. Use w-6 to set an element to a fixed width(1.5rem).

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Vue Notification message components, learn and follow along to implement your own components.