Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Google Fonts
Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
I also want to override some of the builtInCssClasses within the SearchBar component so I’m passing searchBarCssStyles and a cssCompositionMethod of ‘assign’ as props. The ‘assign' method will assign the Tailwind classes I have added to searchBarCssStyles to their corresponding elements. Every built-in style not included in searchBarCssStyles will be left alone. The README in the React Site Search Starter provides an explanation of cssCompositionMethod and its different options.
I have hosted the code for this project here and the live version of the app here.
The Site Search Starter includes Tailwind CSS; a CSS framework that provides utility classes for customizing components in a web application. Unlike CSS frameworks like Bootstrap or Materialize, Tailwind does not provide pre-built components. Instead, its utility classes make it easy to style components that are built from scratch.
In the container field within my custom css classes, I am including a class called font-display. This class is not included with Tailwind and is something that I added to my Tailwind configuration. After downloading some fonts from Google fonts and adding them to my project, I imported them into the application CSS via the tailwind.cssfile.