S.UI

Links

@sgroup/tailwind-plugins/links

Links aren't styled by default, so it's up to you to add the .link class.

Unstyled anchor tag

We encourage the use of an underline by default for accessibility, but you can always invert the behaviour through utility classes. You should not change this behaviour site-wide unless the design calls for this.

Underline inverted

As usual, you can also override any classes, but the .link class provides a good base.

Overrides

There are also some themed links.

Theme

It's a common scenario to have a card layout with a CTA (button or link) and have the entire card be able to be clicked on. Rather than wrapping a <a> tag around the image, heading (and actual link), we can use our stretched-link utility.

All that's required is to add a relative class to the parent element you want to constrain the link to.

Notice in the above examples, hovering over any portion of the card will show the hand cursor. As an added bonus, using this utility will also trigger the :hover and :focus states on links for superior accessibility.

Not only useful for cards, you can use it in a number of scenarios where you might not want to wrap all items with a <a> tag.

Configuration

Configure the @sgroup/tailwind-plugins/link plugin using theme options.

theme: {
    extend: {
        link: (theme) => {
            return {
                // Styles for all links e.g. `.link`.
                DEFAULT: {
                    textTransform: 'uppercase',
                },

                // Override or extend any themed links. Provide _any_ CSS property.
                secondary: {
                    color: theme('textColor.pink.500'),
                    textTransform: 'uppercase',

                    // Change the hover state
                    hover: {
                        textDecoration: 'underline',
                    },
                },

                // Add new named items, like `.link-special`.
                special: {
                    color: theme('textColor.emerald.500'),
                },

                // Add styles to target a breakpoint
                '@screen sm': {
                    fontSize: theme('fontSize.xs'),
                },
            };
        },
    },
},