Enjoyed the article? Instead, by importing the CSS file, all the CSS classes are available here. Check out the official Tailwind CSS website for instructions. border-color: #494949; There are many ways to style your React components. The syntax of Styled Components isn't very clear for many React beginners. border-color: #f6b93b; Let's see how we can style the list and list item elements with Tailwind CSS: The list item element just receives CSS values for its flexbox styling and a vertical padding for top and bottom. Learn React by building real world applications.

You can use it in your React component's JSX: The CSS class is available as property on the imported style object. border-color: #f6b93b; Inline-styling is simple and works out of the box but has many limitations. }, color: #ffffff; background: #ffffff; We will use a popular folder structure for the React project whenever we have a CSS style file. Since we imported the CSS file already, we can just use the CSS class right away: There are a few drawbacks of this CSS usage in React. There is one main difference between Styled Components and Emotion.

For example, you can define reusable CSS variables and you are able to nest your CSS.

However, for the other styles with dashes you need to retrieve them with strings from the object. That means you don't have to worry about global name-conflicts. Tip: The :hover selector can be used on all elements, not only on links.

In modern React, there are many ways to style a React application with CSS. .
For example, the p-2 class gives us a padding to all directions of 0.5rem which -- if nothing else is configured -- translates usually to 8px. First define them in your CSS file: Since both CSS classes are already imported due to the previous button usage, we can use them straight away in React's JSX: CSS classes are usually defined in kebab-case. Styled Component offers only the styled API. Tailwind CSS gives you all the preconfigured CSS that you can use right away in your React's classNames. &:hover { Note: The camel-case is necessary for the inline-styling to work! text-transform: uppercase; Recommendation: For large applications, we would recommend using Emotion. Using preprocessors such as SCSS, LESS or Stylus is straight forward in React. font-size: 20px; The most basic way is to just use vanilla CSS in React with CSS files.

text-decoration: none;

The same can apply the the list and list item elements: You can already see the negative impacts of this approach: your JSX becomes unreadable, because all the style is cluttered within your HTML tags. If you are using create-react-app, you can use Sass after installing it.
Rename your style file to style.scss and import it in your React JavaScript file for further usage: All the other styling and usage remains the same like before -- when we used vanilla CSS --, because we are not using any other Sass features here. . It shows you how to setup CSS Modules, but also how to use them in your components. There are many ways to style React with CSS, this tutorial will take a closer look at inline styling, and CSS stylesheet.

color: #ffffff; display: inline-block;

button, ul, li). CSS Modules can be used with vanilla CSS but also with CSS extensions like Sass. This new JavaScript style object, which is nothing else than a regular JavaScript object, holds all your styles from your CSS file.