DEV Community

loading...

Overriding Reach UI Styles using TailwindCSS in Parcel

Ethan Arrowood
Microsoft Software Engineer
・1 min read

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.

Discussion (0)