Overriding Reach UI Styles using TailwindCSS in Parcel

In my React app I'm using:

In order to use tailwindcss with Parcel I'm using PostCSS. Configuration requires 3 steps:

Create tailwind.config.js and postcss.config.js files

// postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.config.js')
    ]
}

// tailwind.config.js
// This is only necessary if you want to modify tailwindcss
module.exports = {}

Create an app.pcss file

@tailwind base;
@tailwind components;
@tailwind utilities;

Link the PostCSS file to the index.html file

<head>
    <link rel="stylesheet" href="app.pcss">
</head>

In the app itself I'm using the Reach UI Tooltip element:

// import the component and its default styles
import Tooltip from '@reach/tooltip'
import "@reach/tooltip/styles.css"

return (
    <Tooltip
        label='Edit'
    >
        <button className='py-1 px-3 rounded bg-transparent border border-blue-500'>
            <span aria-hidden>✏️</span>
        </button>
    </Tooltip>
)

By default the tooltip looks like this:

To override the default styles of the tooltip element, I add a new block to the app.pcss file targetting the [data-reach-tooltip] selector and using the !important rule at the end of the @apply line.

[data-reach-tooltip] {
    @apply bg-gray-800 text-white py-2 px-4 border-none !important;
}

Now the tooltip looks like this:

And thats it! Thank you for reading. I'll do my best to answer any questions you may have.

Blog

Overriding Reach UI Styles using TailwindCSS in Parcel

Ethan Arrowood

Join Our Newsletter. No Spam, Only the good stuff.

Related