Skip to content

Home

Jump to bottom
Tshiamo Todd edited this page Oct 21, 2024 · 4 revisions

Welcome to the smart_learning wiki!

Introduction

This wiki provides a central location for the team to gain insights on the project, its progress and technical components, to provide a clear understanding of the operations of the project.

Table of contents

  1. Initial brief
  2. Tailwind CSS cheat-sheet

Initial brief

Because the application documentation is in the developmental phase, this document needs to be updated as the project grows. For now to get everyone up to speed with tailwind CSS styling this document serves as a cheat-sheet for quick and easy reference when building the project.

Tailwind CSS cheat-sheet

Example of style implementation:

<View className="flex items-center justify-center">
  <Text className="text-blue-400"> Hello World </Text>
</View>

When styling your components e.g <View></View> you need to specify a className property, where you will define your tailwind CSS classes to shape your components.

This cheat-sheet is expressed in the format of tailwindcss class - CSS equivalent e.g block(tailwind) - display: block(css)

Display

These classes define your component visibility Display

  • block – display: block
    (The element takes up the full width available.)
  • inline-block – display: inline-block
    (The element takes up only as much space as needed, but allows other elements next to it.)
  • inline – display: inline
    (The element only takes up the space of its content, allowing other elements beside it.)
  • flex – display: flex
    (The element becomes a flexible container for its children, aligning them in rows or columns.)
  • inline-flex – display: inline-flex
    (Like flex, but allows other elements next to it.)
  • grid – display: grid
    (Turns the element into a grid container, which allows placing children in rows and columns.)
  • hidden – display: none
    (Makes the element invisible and removes it from the layout.)

Flexbox

These classes define the layout of your components (Flexbox is a one-dimensional layout method for arranging items in rows or columns)

  • flex-row – flex-direction: row
    (Items inside are arranged in a row, left to right.)
  • flex-col – flex-direction: column
    (Items inside are arranged in a column, top to bottom.)
  • justify-center – justify-content: center
    (Items are centered horizontally.)
  • justify-between – justify-content: space-between
    (Items are spread out with space between them.)
  • justify-end – justify-content: flex-end
    (Items are pushed to the right side.)
  • items-center – align-items: center
    (Items are centered vertically.)
  • items-start – align-items: flex-start
    (Items are aligned at the top.)
  • self-start – align-self: flex-start
    (This item is aligned at the top, different from others.)
  • flex-wrap – flex-wrap: wrap
    (Items wrap onto the next line if they don't fit.)
  • flex-1 – flex-grow: 1
    (The item grows to take up all available space.)

Grid

These classes help you create a grid system to easily setup rows and columns

  • grid-cols-3 – 3 equal-width columns
    (Creates a grid with 3 equally wide columns.)
  • gap-4 – gap: 1rem
    (Adds space between grid items.)

Spacing

These classes help you provide scaping in and around your components, to adequately allocate space in your application

Padding:

  • p-0 – padding: 0
    (No space inside the element.)
  • p-4 – padding: 1rem
    (Adds 1rem of space inside the element.)
  • px-4 – padding-left: 1rem, padding-right: 1rem
    (Adds 1rem of space on the left and right.)
  • py-2 – padding-top: 0.5rem, padding-bottom: 0.5rem
    (Adds 0.5rem of space on the top and bottom.)

Margin:

  • m-0 – margin: 0
    (No space outside the element.)
  • m-4 – margin: 1rem
    (Adds 1rem of space outside the element.)
  • mt-4 – margin-top: 1rem
    (Adds 1rem of space above the element.)
  • mx-2 – margin-left: 0.5rem, margin-right: 0.5rem
    (Adds 0.5rem of space on the left and right.)

Typography

These classes help you format your text/font elements, format sizing, color, bold, italics.

Text size:

  • text-xs – font-size: 0.75rem
    (Extra small text size.)
  • text-sm – font-size: 0.875rem
    (Small text size.)
  • text-base – font-size: 1rem
    (Normal text size.)
  • text-xl – font-size: 1.25rem
    (Large text size.)
  • text-2xl – font-size: 1.5rem
    (Extra large text size.)

Font weight:

  • font-thin – font-weight: 100
    (Very light/thin text.)
  • font-light – font-weight: 300
    (Light text.)
  • font-normal – font-weight: 400
    (Normal weight text.)
  • font-semibold – font-weight: 600
    (Slightly bold text.)
  • font-bold – font-weight: 700
    (Bold text.)

Text alignment:

  • text-left – text-align: left
    (Aligns text to the left.)
  • text-center – text-align: center
    (Aligns text to the center.)
  • text-right – text-align: right
    (Aligns text to the right.)

Text color:

  • text-black – color: black
    (Black text color.)
  • text-white – color: white
    (White text color.)
  • text-gray-500 – color: #6b7280
    (Medium gray text color.)

Colors

These classes help you set colors for the various elements in your application

Background color:

  • bg-white – background-color: white
    (White background.)
  • bg-gray-100 – background-color: #f3f4f6
    (Very light gray background.)
  • bg-blue-500 – background-color: #3b82f6
    (Medium blue background.)
  • bg-red-500 – background-color: #ef4444
    (Medium red background.)

Text color:

  • text-black – color: black
    (Black text color.)
  • text-white – color: white
    (White text color.)
  • text-gray-500 – color: #6b7280
    (Medium gray text color.)

Borders

These classes help you define the border of your elements.

Border width:

  • border – border-width: 1px
    (Thin border around the element.)
  • border-2 – border-width: 2px
    (Medium-thickness border.)
  • border-4 – border-width: 4px
    (Thick border.)

Border radius:

  • rounded-none – border-radius: 0
    (No rounded corners.)
  • rounded-sm – border-radius: 0.125rem
    (Slightly rounded corners.)
  • rounded – border-radius: 0.25rem`
    (Moderate rounded corners.)
  • rounded-lg – border-radius: 0.5rem
    (Large rounded corners.)
  • rounded-full – border-radius: 9999px
    (Completely circular or oval corners.)

Border color:

  • border-black – border-color: black
    (Black border.)
  • border-white – border-color: white
    (White border.)
  • border-gray-500 – border-color: #6b7280
    (Medium gray border.)

Sizing

These classes help you define the sizing of your elements, specify how wide or long you want your elements to be in relation to the screen

Width:

  • w-1/2 – width: 50%
    (Takes up 50% of the available width.)
  • w-full – width: 100%
    (Takes up the full width.)
  • w-screen – width: 100vw
    (Takes up the full width of the viewport.)

Height:

  • h-1/2 – height: 50%
    (Takes up 50% of the available height.)
  • h-full – height: 100%
    (Takes up the full height.)
  • h-screen – height: 100vh
    (Takes up the full height of the viewport.)

Shadows and Opacity

These classes help you define how visible your elements are as well as specifying the shadows associated with your elements.

Box shadow:

  • shadow-sm – small shadow
    (Adds a small shadow around the element.)
  • shadow – medium shadow
    (Adds a regular shadow.)
  • shadow-lg – large shadow
    (Adds a large shadow.)
  • shadow-none – no shadow
    (Removes any shadow.)

*Opacity:

  • opacity-100 – opacity: 1
    (Fully visible, no transparency.)
  • opacity-75 – opacity

Clone this wiki locally