├── .editorconfig ├── .gitignore ├── README.md ├── assets ├── README.md ├── css │ └── tailwind.css └── img │ ├── background.png │ └── logo-meetup.svg ├── components ├── Logo.vue └── README.md ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── old_postcss.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── discord.vue ├── github.vue ├── index.vue ├── meetup.vue ├── readme-tailwind.md └── spotify.vue ├── plugins ├── README.md └── vue-airbnb-style-datepicker.js ├── static ├── README.md ├── albumcover01.jpg ├── albumcover02.jpg ├── albumcover03.jpg ├── albumcover04.jpg ├── albumcover05.jpg ├── albumcover06.jpg ├── avatar.jpg ├── avatar2.jpg ├── favicon.ico ├── icon_discord.svg ├── icon_laravel.svg ├── icon_tailwind.svg └── icon_vue.svg ├── store └── README.md └── tailwind.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS v1.x Examples 2 | 3 | A collection of web pages and web components built in Tailwind CSS v1.x. For Tailwind CSS v0.7.4 examples, check out [my other repo](https://github.com/drehimself/tailwind-examples). 4 | 5 | Website: [https://tailwind-v1-examples.netlify.com](https://tailwind-v1-examples.netlify.com) 6 | 7 | Screencasts: [YouTube link](https://www.youtube.com/playlist?list=PLEhEHUEU3x5p8cxOJ27w20LffCknp935L) 8 | 9 | ## Installation 10 | 11 | I'm using [Nuxt.js](https://nuxtjs.org) for these examples. It easily allows me to create static pages for easy deployment to Netlify. 12 | 13 | 1. Clone the repo and `cd` into it 14 | 1. `npm install` 15 | 1. `npm run dev` for development or `npm run generate` to generate static pages for production. 16 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | 7 | .bg-image { 8 | background-image: url('~assets/img/background.png'); 9 | } 10 | 11 | .chat::-webkit-scrollbar-track 12 | { 13 | border-radius: 0px; 14 | background-color: #3F495A; 15 | } 16 | 17 | .chat::-webkit-scrollbar 18 | { 19 | width: 10px; 20 | background-color: #3F495A; 21 | } 22 | 23 | .chat::-webkit-scrollbar-thumb 24 | { 25 | border-radius: 10px; 26 | background-color: #1F2225; 27 | } 28 | 29 | .hashtag-bar::-webkit-scrollbar-track 30 | { 31 | border-radius: 0px; 32 | background-color: #3F495A; 33 | } 34 | 35 | .hashtag-bar::-webkit-scrollbar 36 | { 37 | width: 10px; 38 | background-color: #3F495A; 39 | } 40 | 41 | .hashtag-bar::-webkit-scrollbar-thumb { 42 | border-radius: 10px; 43 | background-color: #1F2225; 44 | } 45 | 46 | .sidebar-users::-webkit-scrollbar-track 47 | { 48 | border-radius: 0px; 49 | background-color: #3F495A; 50 | } 51 | 52 | .sidebar-users::-webkit-scrollbar 53 | { 54 | width: 10px; 55 | background-color: #3F495A; 56 | } 57 | 58 | .sidebar-users::-webkit-scrollbar-thumb { 59 | border-radius: 10px; 60 | background-color: #1F2225; 61 | } 62 | 63 | .channel-bar::-webkit-scrollbar-track 64 | { 65 | border-radius: 0px; 66 | background-color: #1F2225; 67 | } 68 | 69 | .channel-bar::-webkit-scrollbar 70 | { 71 | width: 10px; 72 | background-color: #1F2225; 73 | } 74 | 75 | .channel-bar::-webkit-scrollbar-thumb { 76 | border-radius: 10px; 77 | background-color: #3F495A; 78 | } 79 | -------------------------------------------------------------------------------- /assets/img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/assets/img/background.png -------------------------------------------------------------------------------- /assets/img/logo-meetup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package' 2 | import path from 'path' 3 | 4 | export default { 5 | mode: 'universal', 6 | 7 | /* 8 | ** Headers of the page 9 | */ 10 | head: { 11 | title: 'Tailwind CSS v1.x - Examples of Web Pages' , 12 | meta: [ 13 | { charset: 'utf-8' }, 14 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 15 | { hid: 'description', name: 'description', content: pkg.description } 16 | ], 17 | link: [ 18 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 19 | { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' } 20 | ] 21 | }, 22 | 23 | /* 24 | ** Customize the progress-bar color 25 | */ 26 | loading: { color: '#fff' }, 27 | 28 | /* 29 | ** Global CSS 30 | */ 31 | css: [ 32 | '~/assets/css/tailwind.css' 33 | ], 34 | 35 | /* 36 | ** Plugins to load before mounting the App 37 | */ 38 | plugins: [ 39 | { src: '~/plugins/vue-airbnb-style-datepicker.js', ssr: true } 40 | ], 41 | 42 | /* 43 | ** Nuxt.js modules 44 | */ 45 | modules: [ 46 | // Doc: https://axios.nuxtjs.org/usage 47 | '@nuxtjs/axios', 48 | '@nuxtjs/markdownit', 49 | ], 50 | /* 51 | ** Axios module configuration 52 | */ 53 | axios: { 54 | // See https://github.com/nuxt-community/axios-module#options 55 | }, 56 | 57 | /* 58 | ** Build configuration 59 | */ 60 | build: { 61 | postcss: { 62 | plugins: { 63 | 'tailwindcss': path.resolve(__dirname, 'tailwind.config.js'), 64 | } 65 | }, 66 | /* 67 | ** You can extend webpack config here 68 | */ 69 | extend(config, ctx) { 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /old_postcss.config.js: -------------------------------------------------------------------------------- 1 | const join = require('path').join 2 | const tailwindJS = join(__dirname, 'tailwind.config.js') 3 | 4 | module.exports = { 5 | plugins: [ 6 | require('tailwindcss')(tailwindJS), 7 | require('autoprefixer') 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-v1-examples", 3 | "version": "1.0.0", 4 | "description": "Tailwind v1 Examples", 5 | "author": "Andre Madarang", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "@nuxtjs/axios": "^5.3.6", 15 | "@nuxtjs/markdownit": "^1.2.10", 16 | "@tailwindcss/typography": "^0.2.0", 17 | "cross-env": "^5.2.0", 18 | "date-fns": "^1.30.1", 19 | "nuxt": "^2.11.0", 20 | "vue-airbnb-style-datepicker": "^2.7.1" 21 | }, 22 | "devDependencies": { 23 | "nodemon": "^1.18.9", 24 | "autoprefixer": "^8.6.4", 25 | "tailwindcss": "^1.5.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/discord.vue: -------------------------------------------------------------------------------- 1 | 609 | -------------------------------------------------------------------------------- /pages/github.vue: -------------------------------------------------------------------------------- 1 | 445 | 446 | 457 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 139 | 140 | 147 | 148 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /pages/meetup.vue: -------------------------------------------------------------------------------- 1 | 288 | 289 | 319 | 320 | 333 | -------------------------------------------------------------------------------- /pages/readme-tailwind.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Tailwind CSS 4 |
5 | A utility-first CSS framework for rapidly building custom user interfaces. 6 |

7 | 8 |

9 | Build Status 10 | Total Downloads 11 | Latest Release 12 | License 13 |

14 | 15 | ------ 16 | 17 | ## Documentation 18 | 19 | For full documentation, visit [tailwindcss.com](https://tailwindcss.com/). 20 | 21 | ## Community 22 | 23 | For help, discussion about best practices, or any other conversation that would benefit from being searchable: 24 | 25 | [Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions) 26 | 27 | For casual chit-chat with others using the framework: 28 | 29 | [Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe) 30 | 31 | ## Contributing 32 | 33 | If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**. 34 | 35 | ```js 36 | // tailwind.config.js 37 | module.exports = { 38 | theme: { 39 | // ... 40 | }, 41 | plugins: [ 42 | require('@tailwindcss/typography'), 43 | // ... 44 | ], 45 | } 46 | -------------------------------------------------------------------------------- /pages/spotify.vue: -------------------------------------------------------------------------------- 1 | 328 | 329 | 352 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/vue-airbnb-style-datepicker.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // import component and stylesheet 4 | import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker' 5 | import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css' 6 | 7 | // see docs for available options 8 | const datepickerOptions = { 9 | colors: { 10 | selected: '#1F24CC', 11 | inRange: '#66e2da', 12 | selectedText: '#fff', 13 | text: '#565a5c', 14 | inRangeBorder: '#33dacd', 15 | disabled: '#fff', 16 | hoveredInRange: '#67f6ee' 17 | }, 18 | } 19 | 20 | // make sure we can use it in our components 21 | Vue.use(AirbnbStyleDatepicker, datepickerOptions) 22 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/albumcover01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover01.jpg -------------------------------------------------------------------------------- /static/albumcover02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover02.jpg -------------------------------------------------------------------------------- /static/albumcover03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover03.jpg -------------------------------------------------------------------------------- /static/albumcover04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover04.jpg -------------------------------------------------------------------------------- /static/albumcover05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover05.jpg -------------------------------------------------------------------------------- /static/albumcover06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/albumcover06.jpg -------------------------------------------------------------------------------- /static/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/avatar.jpg -------------------------------------------------------------------------------- /static/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/avatar2.jpg -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drehimself/tailwind-v1-examples/f95568f625c4c8e7df6c8ec4f6765f7d4d78ce5c/static/favicon.ico -------------------------------------------------------------------------------- /static/icon_discord.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/icon_laravel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/icon_tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /static/icon_vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [ 3 | './**/*.vue', 4 | ], 5 | theme: { 6 | typography: (theme) => ({ 7 | default: { 8 | css: { 9 | a: { 10 | color: theme('colors.blue.600'), 11 | }, 12 | img: { 13 | display: 'inline-block' 14 | }, 15 | hr: { 16 | borderColor: theme('colors.gray.400'), 17 | marginTop: '2em', 18 | marginBottom: '2em', 19 | } 20 | } 21 | } 22 | }), 23 | extend: { 24 | colors: { 25 | 'meetup-blue': '#00455D', 26 | 'meetup-purple': '#1F24CC', 27 | 'gray-750': '#3f495a', 28 | 'gray-850': '#222733', 29 | 'gray-900-spotify': '#121212', 30 | 'gray-800-spotify': '#181818', 31 | 'gray-700-spotify': '#282828', 32 | }, 33 | spacing: { 34 | '14': '3.5rem', 35 | '22': '5.5rem', 36 | '72': '18rem', 37 | '200': '50rem', 38 | }, 39 | width: { 40 | '7/10': '70%', 41 | '3/10': '30%', 42 | }, 43 | fontSize: { 44 | xxs: '0.5rem', 45 | }, 46 | lineHeight: { 47 | 'extra-loose': '2.5', 48 | }, 49 | }, 50 | container: { 51 | padding: '1rem' 52 | }, 53 | fontFamily: { 54 | sans: [ 55 | '-apple-system', 56 | 'BlinkMacSystemFont', 57 | '"Segoe UI"', 58 | 'Roboto', 59 | '"Helvetica Neue"', 60 | 'Arial', 61 | '"Noto Sans"', 62 | 'sans-serif', 63 | '"Apple Color Emoji"', 64 | '"Segoe UI Emoji"', 65 | '"Segoe UI Symbol"', 66 | '"Noto Color Emoji"', 67 | ], 68 | 'source-sans-pro': [ 69 | 'Source Sans Pro', 70 | 'Roboto', 71 | '-apple-system', 72 | 'BlinkMacSystemFont', 73 | '"Segoe UI"', 74 | '"Helvetica Neue"', 75 | 'Arial', 76 | '"Noto Sans"', 77 | 'sans-serif', 78 | '"Apple Color Emoji"', 79 | '"Segoe UI Emoji"', 80 | '"Segoe UI Symbol"', 81 | '"Noto Color Emoji"', 82 | ], 83 | serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], 84 | mono: [ 85 | 'Menlo', 86 | 'Monaco', 87 | 'Consolas', 88 | '"Liberation Mono"', 89 | '"Courier New"', 90 | 'monospace', 91 | ], 92 | }, 93 | }, 94 | variants: { 95 | textColor: ['responsive', 'hover', 'focus', 'group-hover'], 96 | }, 97 | plugins: [ 98 | require('@tailwindcss/typography'), 99 | ] 100 | } 101 | --------------------------------------------------------------------------------