React Fundamentals

CSS Styles

CSS files
Inline Styles
CSS Modules
Tailwind.js
~~CSS in JS~~

Styling React

CSS Classes

      import "./styles.css"

function App() {
  return <h1></h1>
}

      .header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

body {
  padding: 16px;
}

      <html>
  <head>
    <link rel="stylesheet" type="text/css" 
          href="/styles.css"></link>
  </head>
  <body>
  </body>
</html>

Styling React

CSS Classes

      function App() {
  return (
    <>
      <h1>
        Header
      </h1>
      <p>
        My Text
      </p>
    </>
  )
}
import { render } from 'react';
render(<App />)

      .header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

body {
  padding: 16px;
}

Styling React

Inline Styles

      

function App() {
  return (
    <>
      <h1>
        Header
      </h1>
      <p>
        My Text
      </p>
    </>
  )
}
import { render } from 'react';
render(<App />)

      .header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

body {
  padding: 16px;
}

The issue with global class names is that it can create naming conflicts with multiple classes sharing the same name. This is particularly dangerous if you use 3rd party ui libraries that introduce their classes in a global namespace. Alternatively, you can use inline styles to specify the look of your elements.

In HTML, you would specify styles in this way. Unfortunately, React does not know how to parse the style string.

Instead, in React, for increased type safety and control, we use the object notation with CSS style names in the Pascal case.

You can also easily create reusable styles and share it with multiple components

Running this code styles both the header and the paragraph. However, the issue with inline styles is that they are limited in their use, as they cannot specify advanced behaviours such as mouse over events or media queries for responsive styling.

Styling React

CSS Modules

      import "./styles.css";

function App() {
  return (
    <>
      <h1 className="header">
        Header
      </h1>
    </>
  )
}

<h1 className="App_header_JQ3e45">
  Hello
</h1>

      .header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

body {
  padding: 16px;
}

Styling React

Tailwind.js

What is Tailwind CSS?
Why use Tailwind?
Example

    <button style={{
    backgroundColor: "var(--color-blue-700)",
    color: "white",
    padding: "4px 8px"
}}>
    Click Me
</button>

    <button className="
    bg-blue-500 
    text-white
    px-1 py-2
">
    Click Me
</button>

Inline Styles

Tailwind

Tailwind.js

Installation

Create Project and Install Tailwind
Configure postcss.config.mjs
Import tailwind into global.css

    pnpx create-next-app@latest tailwind --typescript --eslint --app 
pnpm install tailwindcss @tailwindcss/postcss postcss

    const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

    @import "tailwindcss";

Tailwind / Utility Classes

Introduction

prefixes?:identifier-param1?-param2?...

text-red-200
hover:text-red-500
p-8
rounded
dark:hover:bg-blue-200

https://tailwindcss.com/docs

Let's check out how Tailwind utility classes work

Each tailwind utility class starts with zero or more prefixes, followed by the class identifier and parameters separated by hyphens.

Consider this utility class with identifier text and two parameters, red and 200. This class sets the colour of the text to red with a shade of 200.

This class uses the prefix named hover, identifier text and two parameters, red and 500. In this case, the color of the text when mouse if over the text will be set to red, with a shade of 500.

Utility classes can have a variable number of parameters and prefixes, such as this one with one parameter ...

... this one with no parameters at all.

... or this one with multiple prefixes

We strongly recommend you check the official documentation of Tailwind to discover its full potential. But, for now, let's explore a few utility classes that we will use in this class.

Tailwind / Utility Classes

Text and Background Colors

text-red-500 → Sets text colour
- text-[colour]-[shade]
bg-gray-200 → Sets background colour
- bg-[colour]-[shade]
p-4 → Adds padding
- p-number (multiplications of 4)
- p-[value] (e.g. p-[20px])
- pt, pb, px ...

    <p className="text-red-500 bg-gray-200 p-4">Hello Tailwind!</p>

Tailwind / Utility Classes

Typography and Font Styling

text-3xl → Large font size
font-bold → Bold text
underline → Underlined text

    <h1 className="text-3xl font-bold underline">Welcome</h1>

Full Stack Development

CSS Styles

React Fundamentals

CSS Styles

Styling React

CSS Classes

Styling React

CSS Classes

Styling React

Inline Styles

Styling React

CSS Modules

Styling React

Tailwind.js

Tailwind.js

Installation

Tailwind / Utility Classes

Introduction

Tailwind / Utility Classes

Text and Background Colors

Playground

Tailwind / Utility Classes

Typography and Font Styling

Playground

Tailwind / Utility Classes

Flexbox & Layout

Playground

Tailwind / Utility Classes

Responsive Layout

Playground

Exercise