├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── babel.config.json ├── jest.config.js ├── jest.setup.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html └── robots.txt ├── snowpack.config.json ├── src ├── App.jsx ├── index.css └── index.jsx └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .build 2 | build 3 | web_modules 4 | node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | """ 2 | MIT License 3 | 4 | Copyright (c) 2020 Mark Ladyshau 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | """ 24 | 25 | This license applies to parts of the repository originating from the 26 | https://github.com/facebook/create-react-app repository: 27 | 28 | """ 29 | MIT License 30 | 31 | Copyright (c) 2013-present, Facebook, Inc. 32 | 33 | Permission is hereby granted, free of charge, to any person obtaining a copy 34 | of this software and associated documentation files (the "Software"), to deal 35 | in the Software without restriction, including without limitation the rights 36 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 37 | copies of the Software, and to permit persons to whom the Software is 38 | furnished to do so, subject to the following conditions: 39 | 40 | The above copyright notice and this permission notice shall be included in all 41 | copies or substantial portions of the Software. 42 | 43 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 44 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 45 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 46 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 47 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 48 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 49 | SOFTWARE. 50 | """ 51 | 52 | This license applies to parts of packages/plugin-react-refresh/plugin.js originating 53 | from the https://github.com/vitejs/vite-plugin-react repository: 54 | 55 | """ 56 | MIT License 57 | 58 | Copyright (c) 2020-present, Yuxi (Evan) You 59 | 60 | Permission is hereby granted, free of charge, to any person obtaining a copy 61 | of this software and associated documentation files (the "Software"), to deal 62 | in the Software without restriction, including without limitation the rights 63 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 64 | copies of the Software, and to permit persons to whom the Software is 65 | furnished to do so, subject to the following conditions: 66 | 67 | The above copyright notice and this permission notice shall be included in all 68 | copies or substantial portions of the Software. 69 | 70 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 71 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 72 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 73 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 74 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 75 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 76 | SOFTWARE. 77 | """ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📦 React + Snowpack + Tailwindcss 2 | 3 | [React](https://reactjs.org), powered by [Snowpack](https://www.snowpack.dev) 4 | with [Tailwindcss](https://tailwindcss.com). 5 | 6 | ## Available Scripts 7 | 8 | ### npm start 9 | 10 | Runs the app in the development mode. 11 | Open http://localhost:8080 to view it in the browser. 12 | 13 | The page will reload if you make edits. 14 | You will also see any lint errors in the console. 15 | 16 | ### npm test 17 | 18 | Launches the test runner in the interactive watch mode. 19 | See the section about running tests for more information. 20 | 21 | ### npm run build 22 | 23 | Builds a static copy of your site to the `build/` folder. 24 | Your app is ready to be deployed! 25 | 26 | **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your `snowpack.config.json` config file. 27 | 28 | ### Q: What about Eject? 29 | 30 | No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same. 31 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@snowpack/app-scripts-react/babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require("@snowpack/app-scripts-react/jest.config.js")(), 3 | }; 4 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom/extend-expect"; 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snowpack-react-tailwind", 3 | "version": "0.0.1", 4 | "license": "MIT", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:mrkldshv/snowpack-react-tailwind.git" 9 | }, 10 | "keywords": [ 11 | "csa-template", 12 | "snowpack", 13 | "react", 14 | "tailwindcss" 15 | ], 16 | "author": "Mark Ladyshau ", 17 | "scripts": { 18 | "prepare": "snowpack", 19 | "start": "snowpack dev", 20 | "build": "snowpack build", 21 | "test": "jest" 22 | }, 23 | "dependencies": { 24 | "react": "^16.14.0", 25 | "react-dom": "^16.13.0", 26 | "tailwindcss": "^1.9.6" 27 | }, 28 | "devDependencies": { 29 | "@snowpack/app-scripts-react": "^1.12.6", 30 | "@testing-library/jest-dom": "^5.5.0", 31 | "@testing-library/react": "^10.0.3", 32 | "jest": "^26.6.3", 33 | "postcss": "^8.2.10", 34 | "postcss-cli": "^7.1.1", 35 | "prettier": "^2.0.0", 36 | "snowpack": "^2.18.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('tailwindcss'), require('autoprefixer')], 3 | }; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrkldshv/snowpack-react-tailwind/ae5498a3889eb574c7d1850dec178c3e6f611cdf/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Snowpack App 13 | 14 | 15 |
16 | 17 | 18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /snowpack.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@snowpack/app-scripts-react", 3 | "scripts": { "build:css": "postcss" }, 4 | "plugins": [] 5 | } 6 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function App() { 4 | return ( 5 |
6 |
7 | 13 | 17 | 21 | 25 | 29 | 30 | 36 | React 37 | 38 |
39 | 54 |
55 | 66 | 72 | Snowpack 73 | 74 |
75 | 90 |
91 | 123 | 129 | Tailwind 130 | 131 |
132 |
133 | ); 134 | } 135 | 136 | export default App; 137 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root'), 11 | ); 12 | 13 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR. 14 | // Learn more: https://www.snowpack.dev/#hot-module-replacement 15 | if (import.meta.hot) { 16 | import.meta.hot.accept(); 17 | } 18 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme'); 2 | 3 | module.exports = { 4 | purge: ['./src/**/*.jsx', './src/**/*.js'], 5 | theme: { 6 | extend: { 7 | fontFamily: { 8 | sans: ['Inter var', ...defaultTheme.fontFamily.sans], 9 | }, 10 | }, 11 | }, 12 | variants: {}, 13 | plugins: [], 14 | }; 15 | --------------------------------------------------------------------------------