search

the-collab-lab / tcl-23-smart-shopping-list

1 stars 2 forks source link

Add tailwind #30

Closed jamesncox closed 3 years ago

jamesncox commented 3 years ago

Description

Configures our React.js project for Tailwind CSS using the Tailwind documentaion.

NOT TO BE MERGED UNTIL #13 is merged: https://github.com/the-collab-lab/tcl-23-smart-shopping-list/pull/28

Related Issue

Closes #31

Type of Changes

Type
:bug: Bug fix
✓ :sparkles: New feature
✓ :hammer: Refactoring
:100: Add tests
✓ :link: Update dependencies
:scroll: Docs

Updates

Before

No UI changes

After

The following are screen shots highlighting the changes to the configuration.

  1. Install the Tailwind CSS packaged to package.json
  2. Install Craco package (more information on Create React App Configuration Override aka CRACO)
  3. Update scripts to run with craco config
  4. Create tailwind.config.js
  5. Add custom color palette
  6. Install roboto typeface package
  7. Require roboto typeface in index.js
  8. Add custom roboto font configuration to tailwind.config.js

package-json-tailwind tailwind-config-extends index-require-roboto

Testing Steps / QA Criteria

  1. On main run git pull
  2. Run git checkout add-tailwind
  3. Run npm install to update new dependencies
  4. Run npm start
  5. Navigate to App.js and on line 20 change className="App" to "className="bg-paradise-pink"
  6. VOILA! Tailwind is now controlling styles!
github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit 88f1140):

https://tcl-23-shopping-list--pr30-add-tailwind-wa5sa76e.web.app

(expires Fri, 28 May 2021 16:02:09 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

jamesncox commented 3 years ago

@yenly that's a great point about the tailwind documentation. I'll update the PR with a link to the relevant information!