This is a TailwindCSS intro created by Niamh Doyle. Also covered is an intro to daisyUI, Material UI Icons and Pravatar avatars. Links to all these are below.
- Have fun
- De-scarify CSS libraries
- Demonstrate how painless and easy it is to use Tailwind/Daisy/Icon libraries
- Demonstrate how it can supercharge development of your projects
- Have fun!
- Oh, and also learn a little.
- This is purely styling tutorial. You won't be writing any JavaScript/React. All the React code has already been written for you.
- We will be designing a card with text and icons and adding styling to the card, buttons and page
- I have gone with a person for this tutorial, but you are free to make a card for a pet or a place, etc. Feel free to use the Pravatar images or choose one of your own
There are 3 branches.
You can find out what branch you are currently on by entering in the terminal:
git branch
The currently-viewed branched with be marked with an asterix (*).
Switch to a different branch by entering:
git checkout <name of branch>
Branch "main" contains our starting point for today and the branch we will be working in. In a real project you wouldn't work in main (rather a branch called "dev" or "feature x" but this is just a tutorial on styling)
Branch "final" contains one possible goal state
(You can also have a peek at the final code on GitHub if you get stuck during the tutorial.)
Branch "setup" has the Tailwind/Daisy/Material setup code but nothing else, so you can use it as a jumping off point for your own future projects, should you wish.
This project has been set up so there is no need to run any commands other than:
Install packages:
npm i
The index.html file takes its styles from ./src/output.css, so running the below will ensure that the output.css file is always up-to-date with changes to your CSS. Leave this terminal running (don't kill it!) If at any point it dies or you need to restart, just run the below line again.
npx tailwindcss -i ./src/index.css -o ./src/output.css --watch
In a separate terminal:
npm run dev
- Look at starter code on main (three main components – app, form, card; app has a reducer function to manage state updates)
- Checkout final branch
- Switch back to main
- Create branch "starter" to save start state (but don't checkout; stay on main)
- Uncomment code in index.css
- Apply a data theme (of your choice) in index.html
- Open form
- Style buttons to your preference
- Notice basic input validation
- Notice conditional button disabling
- (Optional) Alter style of input elements
- Update name by submitting data via form
- Click button to randomise starting avatar
- Choose a person or animal or place, etc. for card.
- Apply margins, paddings, flex, flex gaps
- Apply text typographic styling
- Add icons
- Add badges
Material Icons we will use today (feel free to use the ones you prefer!)
daisyUI themeing and components (button, badge):
TailwindCSS utility classes (feel free to explore during the tutorial to find the necessary class name)
Pravatar:
(You can also have a peek at the final code on GitHub if you get stuck during the tutorial.)
A utility-first CSS framework.
DaisyUI is a component class name library built on top of Tailwind CSS.
Material UI is an open-source React component library that implements Google's Material Design. The library comes with icons that are versatile and easy to use.
Contains avatars perfect for using in practice projects / when developing.
If you want to add remote tracking for a branch run:
git checkout <name of branch>
git branch
git push -u origin <name of branch>