{"id":14957124,"url":"https://github.com/billimarie/simple-react-tailwind-tutorial","last_synced_at":"2025-05-02T08:30:29.124Z","repository":{"id":39324421,"uuid":"219857670","full_name":"billimarie/simple-react-tailwind-tutorial","owner":"billimarie","description":"Create a simple, multi-page website that watches your CSS changes \u0026 refreshes your app, accordingly.","archived":false,"fork":false,"pushed_at":"2023-01-05T00:39:17.000Z","size":1797,"stargazers_count":9,"open_issues_count":23,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T00:06:44.767Z","etag":null,"topics":["postcss","react","react-js","react-tutorial","tailwind-css","tailwindcss","tutorial"],"latest_commit_sha":null,"homepage":"https://medium.com/clocktwine/creating-a-simple-website-using-react-tailwind-css-postcss-6bbc419ded0c","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/billimarie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-05T21:53:51.000Z","updated_at":"2024-12-02T10:30:02.000Z","dependencies_parsed_at":"2023-02-03T01:31:39.059Z","dependency_job_id":null,"html_url":"https://github.com/billimarie/simple-react-tailwind-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billimarie%2Fsimple-react-tailwind-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billimarie%2Fsimple-react-tailwind-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billimarie%2Fsimple-react-tailwind-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billimarie%2Fsimple-react-tailwind-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/billimarie","download_url":"https://codeload.github.com/billimarie/simple-react-tailwind-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252008671,"owners_count":21679622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["postcss","react","react-js","react-tutorial","tailwind-css","tailwindcss","tutorial"],"created_at":"2024-09-24T13:14:06.877Z","updated_at":"2025-05-02T08:30:28.657Z","avatar_url":"https://github.com/billimarie.png","language":"CSS","readme":"# React Tutorials\n\u003e Updated: November 11th 2019\n\n## Table of Contents\n1. [Tutorial 1: A Simple Website with React, Tailwind CSS, \u0026 PostCSS](#tutorial-1)\n1. [Tutorial 2: Adding CSS Transitions](#tutorial-2)\n\n# Tutorial 1\n\nCreate a simple, multi-page website that watches your CSS changes \u0026 refreshes your app, accordingly.\n\nTo view the Medium.com article: [Creating A Simple Website with React, Tailwind CSS, \u0026 PostCSS](https://medium.com/clocktwine/creating-a-simple-website-using-react-tailwind-css-postcss-6bbc419ded0c)\n\n## What You Need\n- Terminal / Command Line\n- IDE (I recommend [Atom](https://github.com/atom/atom))\n\n### Versions\n- Node: 8.11.3+\n- npm: 6.12.1+\n\n## Getting Started\n\n### 1. Initialize your React app using `create-react-app`:\n```\n$ npx create-react-app react-tailwind-site\n```\n\n### 2. Change directories into the app \u0026 install `react-router-dom` (for links), `tailwindcss` (for Tailwind CSS), `autoprefixer`, \u0026 `postcss-cli` (to watch \u0026 reload CSS updates):\n```\n$ cd react-tailwind-site\n$ npm install react-router-dom tailwindcss autoprefixer postcss-cli\n```\n\n### 3. Test it out:\n```\n$ npm run start\n```\nA new window should open up (`localhost:3000`) \u0026 display the standard new React App screen.\n\n(Having trouble? See [Troubleshooting](#troubleshooting)).\n\n## Setting Up Tailwind\n\n### 1. Initialize Tailwind \u0026 PostCSS:\n```\n$ npx tailwind init tailwind.config.js\n```\n\n### 2. Create Tailwind.css:\n```\n$ cd src ; mkdir css ; cd css ; touch tailwind.css // Linux\n$ cd src \u0026 mkdir css \u0026 cd css \u0026 touch tailwind.css // Windows\n```\n\n### 3. Add to `src/css/tailwind.css`:\n```\n/* Init Tailwind */\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n\n/* Custom CSS */\n```\n\n## Connecting Tailwind \u0026 React\n\n### 1. Modify your `package.json` with these updated scripts:\n```\n\"scripts\": {\n    \"build:css\": \"postcss src/css/tailwind.css -o src/index.css\",\n    \"watch:css\": \"postcss src/css/tailwind.css -o src/index.css -w\",\n    \"start\": \"npm watch:css \u0026 react-scripts start\",\n    \"build\": \"npm run build:css \u0026\u0026 react-scripts build\",\n    \"test\": \"react-scripts test --env=jsdom\",\n    \"eject\": \"react-scripts eject\"\n}\n```\n\n### 2. Modify `App.js`:\n```\nimport './css/tailwind.css';     /* Replacing App.css */\n```\n\n### 3. Modify `index.js`:\n```\nimport './index.css';    /* Replacing App.css */\n```\n\n### 4. Let's restart the app!\n```\n$ npm run start\n```\n\nYou should see an updated `localhost:3000` page.\n\nTo test that it's watching your CSS changes, go back to `src/css/tailwind.css` \u0026 add a new style under \"Custom CSS.\" Your app should refresh with the changes automatically:\n\n![react-tailwind-watching-loop](https://user-images.githubusercontent.com/6895471/68322467-44e2a100-0078-11ea-811e-13f8456cdf5f.gif)\n\n## Creating Components\n\n### 1. Create a folder called \"Components.\" It should be in your source files (`/src/components/`)\n```\n$ mkdir components\n```\n\n### 2. To start off, let's build a header.\n```\n$ cd src/components ; touch Header.js // Linux\n$ cd src/components \u0026 touch Header.js // Windows\n```\n\n### 3. In Header.js:\n```\nimport React from 'react';\nimport {\n  BrowserRouter as Router,\n  Switch,\n  Route,\n  Link } from 'react-router-dom';\n\nconst Header = () =\u003e (\n  \u003cheader className=\"bg-gray-100 p-6\"\u003e\n    \u003cdiv className=\"flex items-center justify-between flex-wrap\"\u003e\n      \u003cdiv className=\"block\"\u003e\n        \u003cLink to=\"/\"\u003e\u003cspan className=\"font-semibold text-xl tracking-tight text-gray-800\"\u003eTitle Goes Here\u003c/span\u003e\u003c/Link\u003e\n      \u003c/div\u003e\n      \u003cnav className=\"block\"\u003e\n        \u003cLink to=\"/\"\u003e\u003cspan className=\"inline-block text-gray-800 hover:text-gray-600 mr-4\"\u003eHome\u003c/span\u003e\u003c/Link\u003e\n        \u003cLink to=\"/\"\u003e\u003cspan className=\"inline-block text-gray-800 hover:text-gray-600 mr-4\"\u003eAbout\u003c/span\u003e\u003c/Link\u003e\n        \u003cLink to=\"/\"\u003e\u003cspan className=\"inline-block text-gray-800 hover:text-gray-600 mr-4\"\u003eContact\u003c/span\u003e\u003c/Link\u003e\n        \u003cLink to=\"/\"\u003e\u003cspan className=\"inline-block px-4 py-2 leading-none border rounded text-gray-600 border-gray-600 hover:text-gray-900 hover:border-gray-900\"\u003eLogin\u003c/span\u003e\u003c/Link\u003e\n      \u003c/nav\u003e\n    \u003c/div\u003e\n  \u003c/header\u003e\n);\nexport default Header;\n```\n\n### 4. Go to `App.js` and add the following imports\n```\nimport {\n  BrowserRouter as Router,\n  Switch,\n  Route,\n  Link\n} from 'react-router-dom';\nimport Header from './components/Header.js';\n```\n\nScroll down and replace the content React automatically generated with the following:\n```\nconst App = () =\u003e (\n  \u003cRouter\u003e\n    \u003cHeader /\u003e\n  \u003c/Router\u003e\n);\nexport default App;\n```\n\n### 5. Now that we've made the universal header, let's create the pages for Home, About, \u0026 Contact:\n```\n$ touch Home.js About.js Contact.js\n```\n\nOpen `Home.js` add the following:\n\n```\nimport React from 'react';\n\nconst Home = () =\u003e (\n  \u003ch2\u003eHome\u003c/h2\u003e\n);\n\nexport default Home;\n```\n\nYou can reuse this code for your `About.js` and `Contact.js` pages.\n\n### 6. Again, back to `App.js` to import your new components:\n\n```\nimport Home from './components/Home.js';\nimport About from './components/About.js';\nimport Contact from './components/Contact.js';\n```\n\nScroll down to modify:\n\n```\n\u003cRouter\u003e\n  \u003cHeader /\u003e\n  \u003cSwitch\u003e\n    \u003cRoute exact path=\"/\"\u003e\n      \u003cHome /\u003e\n    \u003c/Route\u003e\n\n    \u003cRoute exact path=\"/about\"\u003e\n      \u003cAbout /\u003e\n    \u003c/Route\u003e\n\n    \u003cRoute exact path=\"/contact\"\u003e\n      \u003cContact /\u003e\n    \u003c/Route\u003e\n  \u003c/Switch\u003e\n\u003c/Router\u003e\n```\n\n### 7. Modify `index.js` to activate the router:\n```\nimport { BrowserRouter } from 'react-router-dom';\n\nReactDOM.render(\u003cBrowserRouter\u003e\u003cApp /\u003e\u003c/BrowserRouter\u003e, document.getElementById('root'));\n```\n\n### 8. You're all set! Restart the app to see your new changes.\n```\n$ npm run start\n```\n\nYou should be able to see the new header, and click on each navigation item to take you to a new page:\n\n![react-tailwind-links](https://user-images.githubusercontent.com/6895471/68329481-27b4cf00-0086-11ea-93ee-580fcef18c6e.gif)\n\n## Complete!\n\nIf you get stuck or have any questions, feel free to send me a message. I'd love to see what you create with this; submit a pull request with your screenshot or link to be added to this GitHub repo.\n\n## Troubleshooting\n\n- If you receive an error about ServiceWorker.js, go to `index.js` and comment it out. (You can also delete the file itself under `src/serviceWorker.js`.)\n- Additionally, if you're running Windows, make sure system32 has been added to your PATH (see: [this GitHub issue](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Ffacebook%2Fcreate-react-app%2Fissues%2F7061)).\n\n([Back to Top](#react-tutorials))\n\n# Tutorial 2\n\nAdding CSS Transitions.\n\n## Getting Started\n\n### 1. Add `React Transition Group`:\n```\n$ npm install react-transition-group --save-dev\n```\n\n### 2. Import in your chosen view (I picked `Home.js`):\n```\nimport { CSSTransition } from 'react-transition-group';\n```\n\n### 3. Declare new consts: \n```\nconst [showVertical, setShowVertical] = useState(true),\n      [showHorizontal, setShowHorizontal] = useState(false);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillimarie%2Fsimple-react-tailwind-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbillimarie%2Fsimple-react-tailwind-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillimarie%2Fsimple-react-tailwind-tutorial/lists"}