Home

Awesome

๐ŸŽจ Scaffold-ETH x Tailwind

Scaffold-ETH uses Ant Design out of the box for it's design system. This is perfect for quick scaffolding and fast frontend experimentation. Scaffold-ETH can also be used with any UI framework, though.

Scaffold-ETH x Tailwind uses Tailwind CSS, a utility-first CSS framework quickly becoming the default choice for new projects. It does not have ready-to-go components like modals and buttons but is packed with classes to make your own design system easily.

Scaffold-ETH x Tailwind serves as a starting for using Tailwind with Scaffold-ETH and also doubles as showing what is needed to remove Ant Design from the project. Currently, Scaffold-ETH x Tailwind has a reskinned application shell, wallet modal, dev UI, account header, light/dark theme, address input, and ether input. These are enough reskinned components in Tailwind for a user to start building the rest of their app with Tailwind CSS!

๐Ÿ”— Live Demo: https://scaffold-eth-tailwind.surge.sh/

<img width="1792" alt="image" src="https://user-images.githubusercontent.com/12888080/178321228-59d38958-a367-47ec-a571-2e6f58836cd9.png"> <img width="543" alt="image" src="https://user-images.githubusercontent.com/12888080/178321312-84014873-7790-4cf4-a578-5119ccfb8802.png"> <img width="406" alt="image" src="https://user-images.githubusercontent.com/12888080/167281267-1a7cb792-b273-423a-93f7-382d081a4700.png"> <img width="543" alt="image" src="https://user-images.githubusercontent.com/12888080/167281270-84679051-ab48-42ef-9bf4-5e1d6e041932.png">

๐Ÿ— Scaffold-ETH

everything you need to build on Ethereum! ๐Ÿš€

๐Ÿงช Quickly experiment with Solidity using a frontend that adapts to your smart contract:

image

๐Ÿ„โ€โ™‚๏ธ Quick Start

Prerequisites: Node (v16 LTS) plus Yarn and Git

clone/fork ๐Ÿ— scaffold-eth:

git clone https://github.com/stevenpslade/scaffold-eth-tailwind

install and start your ๐Ÿ‘ทโ€ Hardhat chain:

cd scaffold-eth-tailwind
yarn install
yarn chain

in a second terminal window, start your ๐Ÿ“ฑ frontend:

cd scaffold-eth-tailwind
yarn start

in a third terminal window, ๐Ÿ›ฐ deploy your contract:

cd scaffold-eth-tailwind
yarn deploy

๐Ÿ” Edit your smart contract YourContract.sol in packages/hardhat/contracts

๐Ÿ“ Edit your frontend App.jsx in packages/react-app/src

๐Ÿ’ผ Edit your deployment scripts in packages/hardhat/deploy

๐Ÿ“ฑ Open http://localhost:3000 to see the app

๐Ÿ“š Documentation

Documentation, tutorials, challenges, and many more resources, visit: docs.scaffoldeth.io

๐Ÿ”ญ Learning Solidity

๐Ÿ“• Read the docs: https://docs.soliditylang.org

๐Ÿ“š Go through each topic from solidity by example editing YourContract.sol in ๐Ÿ— scaffold-eth

๐Ÿ“ง Learn the Solidity globals and units

๐Ÿ›  Buidl

Check out all the active branches, open issues, and join/fund the ๐Ÿฐ BuidlGuidl!

๐Ÿ’Œ P.S.

๐ŸŒ You need an RPC key for testnets and production deployments, create an Alchemy account and replace the value of ALCHEMY_KEY = xxx in packages/react-app/src/constants.js with your new key.

๐Ÿ“ฃ Make sure you update the InfuraID before you go to production. Huge thanks to Infura for our special account that fields 7m req/day!

๐Ÿƒ๐Ÿ’จ Speedrun Ethereum

Register as a builder here and start on some of the challenges and build a portfolio.

๐Ÿ’ฌ Support Chat

Join the telegram support chat ๐Ÿ’ฌ to ask questions and find others building with ๐Ÿ— scaffold-eth!


๐Ÿ™ Please check out our Gitcoin grant too!

Automated with Gitpod

Open in Gitpod