├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── netlify.toml ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── styles │ │ └── index.css └── main.js ├── tailwind.config.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | not ie <= 10 3 | not op_mini all 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | `plugin:vue/recommended`, 5 | `@avalanche/eslint-config`, 6 | ], 7 | rules: { 8 | 'no-console': process.env.NODE_ENV === `production` ? `error` : `warn`, 9 | 'no-debugger': process.env.NODE_ENV === `production` ? `error` : `warn`, 10 | 'vue/component-name-in-template-casing': [`error`, 11 | `PascalCase`, 12 | ], 13 | 'vue/no-v-html': `off`, 14 | 'vue/html-closing-bracket-spacing': [`error`, { 15 | startTag: `never`, 16 | endTag: `never`, 17 | selfClosingTag: `never`, 18 | }], 19 | }, 20 | parserOptions: { 21 | parser: `babel-eslint`, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Numerous always-ignore extensions 2 | *.diff 3 | *.err 4 | *.log 5 | *.orig 6 | *.rej 7 | *.swo 8 | *.swp 9 | *.tgz 10 | *.vi 11 | *.zip 12 | *~ 13 | 14 | # OS or Editor folders 15 | ._* 16 | .cache 17 | .DS_Store 18 | .idea 19 | .project 20 | .settings 21 | .tmproj 22 | *.esproj 23 | *.sublime-project 24 | *.sublime-workspace 25 | nbproject 26 | Thumbs.db 27 | 28 | # Folders to ignore 29 | /dist 30 | node_modules 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Setting up Tailwind CSS with Vue.js 2 | 3 | [![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner) 4 | [![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner) 5 | 6 | This is an example project for the following article: [Setting up Tailwind CSS with Vue.js](https://markus.oberlehner.net/blog/setting-up-tailwind-css-with-vue/) 7 | 8 | ## Build Setup 9 | 10 | ```bash 11 | # Install dependencies. 12 | npm install 13 | 14 | # Serve with hot reload. 15 | npm run serve 16 | 17 | # Build for production with minification. 18 | npm run build 19 | ``` 20 | 21 | ## About 22 | 23 | ### Author 24 | 25 | Markus Oberlehner 26 | Website: https://markus.oberlehner.net 27 | Twitter: https://twitter.com/MaOberlehner 28 | PayPal.me: https://paypal.me/maoberlehner 29 | Patreon: https://www.patreon.com/maoberlehner 30 | 31 | ### License 32 | 33 | MIT 34 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | `@vue/app`, 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | # This will be your default build command. 3 | command = "npm run build" 4 | # This is the directory that you are publishing from. 5 | publish = "dist" 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "setting-up-tailwind-css-with-vue", 3 | "version": "0.1.0", 4 | "author": "Markus Oberlehner", 5 | "homepage": "https://github.com/maoberlehner/setting-up-tailwind-css-with-vue", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "serve": "vue-cli-service serve", 10 | "build": "vue-cli-service build", 11 | "lint": "vue-cli-service lint" 12 | }, 13 | "dependencies": { 14 | "@vue/cli-plugin-babel": "^4.5.13", 15 | "@vue/cli-service": "^4.5.13", 16 | "vue": "^2.6.14", 17 | "vue-template-compiler": "^2.6.14" 18 | }, 19 | "devDependencies": { 20 | "@avalanche/eslint-config": "^4.0.0", 21 | "@vue/cli-plugin-eslint": "^4.5.13", 22 | "autoprefixer": "^9", 23 | "babel-core": "7.0.0-bridge.0", 24 | "babel-eslint": "^10.1.0", 25 | "eslint": "^7.30.0", 26 | "eslint-plugin-import": "^2.23.4", 27 | "eslint-plugin-vue": "^7.13.0", 28 | "postcss": "^7", 29 | "tailwindcss": "npm:@tailwindcss/postcss7-compat" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require(`autoprefixer`); 2 | const tailwindcss = require(`tailwindcss`); 3 | 4 | module.exports = { 5 | plugins: [ 6 | tailwindcss, 7 | autoprefixer, 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maoberlehner/setting-up-tailwind-css-with-vue/75d62591c4b0bd7b9a9780219c9e141f924f0bbf/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Setting up Tailwind CSS with Vue.js 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /src/assets/styles/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | import './assets/styles/index.css'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | }).$mount(`#app`); 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [ 3 | `./public/**/*.html`, 4 | `./src/**/*.vue`, 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | variants: {}, 10 | plugins: [], 11 | }; 12 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | --------------------------------------------------------------------------------