Search⌘ K
AI Features
Home
Courses
Understanding the Basics of Tailwind CSS

Creating the Arrows Plugin

Explore how to create a custom arrows plugin in Tailwind CSS by using the addComponents function and CSS techniques. Understand how to build directional arrow classes and integrate them into a dynamic tree-view list, enhancing UI clarity and interactivity.

We'll cover the following...

In this lesson, we’ll create a custom arrow plugin. This arrows plugin will use a technique for creating different shapes with CSS—which shouldn’t be confused with the CSS Shapes module. It will produce four arrows that we can use as icons in our designs.

Adding the addComponents() function

To start, we’ll create a new arrows.js file in the plugins directory with the following content:

Javascript (babel-node)
// /plugins/arrows.js
const plugin = require('tailwindcss/plugin')
const arrows = plugin(function ({ addComponents }) {
  addComponents({
    '.arrow': {
      border: 'solid black',
      borderWidth: '0 3px 3px 0',
      display: 'inline-block',
      padding: '3px',
      marginLeft: '5px'
    },
    '.arrow-up': {
      transform: 'rotate(-135deg)'
    },
    '.arrow-right': {
      transform: 'rotate(-45deg)'
    },
    '.arrow-down': {
      transform: 'rotate(45deg)'
    },
    '.arrow-left': {
      transform: 'rotate(135deg)'
    },
  })
})
module.exports = arrows

  • Line 4: Here, we’ve used the addComponents() function to define the necessary classes. ...