DEV Community

Ethan Arrowood
Ethan Arrowood

Posted on

2 2

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:

  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)

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay