DEV Community

Ethan Arrowood
Ethan Arrowood

Posted on

Overriding Reach UI Styles using TailwindCSS in Parcel

#css #tailwindcss #react #a11y

In my React app I'm using:

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

  1. 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 = {}

  2. Create an app.pcss file

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

  3. 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>
)
Enter fullscreen mode Exit fullscreen mode

By default the tooltip looks like this:
Default Edit Tooltip

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;
}
Enter fullscreen mode Exit fullscreen mode

Now the tooltip looks like this:
Newly styled Edit Tooltip

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

Top comments (0)