## Objectives 1. Install and configure Tailwind CSS. 1. Prettify your components. ## Get started In this video, you will set up the Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git. `youtube:https://www.youtube.com/embed/dFgzHOX84xQ` In this video you will learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster. `youtube:https://www.youtube.com/embed/pfaSUYaSgRo` ## Install Follow this [guide][guide] for more information. ```bash:title=>./web npm install -D tailwindcss postcss autoprefixer npx tailwindcss init ``` > Restart the server because you installed new dependencies. ```bash:title=>./web touch postcss.config.js ``` ```js:title=./web/postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } ``` ```js:title=./web/tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` ```bash:title=>./web touch ./src/styles.css ``` ```css:title=./web/src/styles.css @tailwind base; @tailwind components; @tailwind utilities; ``` ```jsx:title=./web/src/index.js import '../styles.css'; ``` ## Prettify components Layout can have a dark background color, light text color and the minimum height of the background will be the vertical height (`vh`) of the screen. The parent div to `Outlet` has a max width, has `auto` horizontal margins and padding to give it some breathing room. ```jsx:title=./web/src/components/Layout.js const Layout = () => { return (

); }; ``` The navigation is given a dark blue background with light blue text and some padding. The first child follows the same principle as the parent `Outlet` div above but it is also a flex box and is told to space with justify between. That means that the Home menu item will be on the left and the Register and Login buttons on the right. The `ul`s are both flex and have spacing applied to it. ```jsx:title=./web/src/components/Navigation.js import { Link } from 'react-router-dom'; const Navigation = () => { return ( ); }; export default Navigation; ``` Each company review will have a bottom margin for spacing, the heading will be large text with bottom margin and the ⭐ has left margin. ```jsx:title=./web/src/pages/Home.js return (

{title} {rating && ⭐ {rating}}

{abstract}

); ``` The heading on the Review page is larger than the text and has a bottom border. The rating has a left margin and the abstract a bottom margin. ```jsx:title=./web/src/pages/Review.js return (

{title} {rating && ⭐ {rating}}

{abstract}

{ const result = await axios.put( `http://localhost:3001/api/review/${slug}/rate/${rating}`, ); setReview(result.data); }} /> { const result = await axios.post( `http://localhost:3001/api/review/${slug}/comment`, data, ); setReview(result.data); }} />

); ``` Now the you have a small idea about how Tailwind CSS works, you can refer to the docs for classes that you don't understand. Below is the Controls component. ```jsx:title=./web/src/components/Controls.js const Form = ({ title, children }) => { return (

{title} {children}

); }; const Label = ({ label, children, isRequired }) => { return ( {label} {isRequired ? ( Required ) : ( <> )} {children} ); }; const TextBox = forwardRef( ({ label, isRequired, type, placeholder, ...rest }, ref) => { return ( ); }, ); const TextArea = forwardRef( ({ label, isRequired, placeholder, rows, ...rest }, ref) => { console.log(ref); return ( ); }, ); const Button = ({ children, onClick }) => { return ( ); }; ``` The Rating component: ```jsx:title=./web/src/components/Rating.js import { useRef, useState } from 'react'; import { Form } from './Controls'; const LeftStar = ({ value, isHover, isActive, onHover, onRated }) => { const leftStar = useRef(); return ( onRated(value)} onMouseEnter={() => onHover(value)} /> ); }; const RightStar = ({ value, isHover, isActive, onHover, onRated }) => { const rightStar = useRef(); return ( onRated(value)} onMouseEnter={() => onHover(value)} /> ); }; const Stars = ({ size, value, stars, onRated }) => { const [hoverValue, onHover] = useState(0); const [hovering, toggleHovering] = useState(false); return (

{stars.map((rating) => { return (

); })}

); }; const Rating = ({ title, value, max, onRated }) => { const [rating, setRating] = useState(value || 0); const stars = Array.from(Array(max).keys()).map((i) => i + 1); const handleRated = (value) => { setRating(value); onRated && onRated(value); }; const handleReset = () => { setRating(0); onRated && onRated(0); }; return (

{title}: {rating} ⭐ } > ); }; export default Rating; ``` ![Rating component](./assets/rating.png 'Screenshot of the component') Lastly, the comments listing component can be spruced up a little. ```jsx:title=./web/src/components/Comments.js return ( ); ``` ## Next steps You are going to remove hardcoded variables by adding environment variables. ## References - [Tailwind Crash Course | Project From Scratch][tailwindcss-vid] - Traversy Media on YouTube - [Prettify with Tailwind CSS][guide] - Curious Programmer [guide]: https://curiousprogrammer.dev/courses/jamstack/08/prettify-with-tailwind-css [tailwindcss-vid]: https://www.youtube.com/watch?v=dFgzHOX84xQ