Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken styling in search with TailwindCSS

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior? Alignment of the search results and the Algolia branding are distorted when using TailwindCSS.

It seems that TailwindCSS and Algolia aren’t being friendly with each other. A similar issue #1046 has been raised (refer to OP’s screenshot) in the past however it only partially fixed

HTML

Collapsed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Agolia Address Autocomplete</title>
    <style>
    </style>
</head>

<body>
    <input type="search" class="" id="address-input" placeholder="Where are we going?" />

    <script src="https://cdn.jsdelivr.net/npm/places.js@1.19.0"></script>
    <script>
      var placesAutocomplete = places({
        appId: 'MY',
        apiKey: 'PRECIOUS',
        container: document.querySelector('#address-input')
      });
    </script>
</body>

</html>

What is the expected behavior? Commented out TailwindCSS CDN link, and inserted * { font-family: Arial, Helvetica, sans-serif;} for better looking results.

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

lchoatecommented, Jul 1, 2020

Adding the following to base.css will fix the issue.

.ap-footer-algolia svg {
    display: inherit;
}
.ap-footer-osm svg {
    display: inherit;
}

0reactions

n10000kcommented, Jun 11, 2020

Regardless this isn’t an issue with algolia places. You should see support do tailwindcss to add prefixes.

Top Results From Across the Web

Tailwind CSS breaking existing styles - Stack Overflow

When you use both bootstrap and tailwind-css at the same time, you will face naming conflicts which will lead to undefined behavior ,....

Customizing Screens - Tailwind CSS

Customizing the default breakpoints for your project. Configuring custom screens. You define your project's breakpoints in the theme.screens section of your ...

Responsive Design - Tailwind CSS

Overview. Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex...

Adding Custom Styles - Tailwind CSS

This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, ......

Appearance - Tailwind CSS

Use appearance-none to reset any browser specific styling on an element. This utility is often used when creating custom form components.