Skip to content

Commit f479009

Browse files
rellivrelliv
committed
Add tailwind support
1 parent 37e716b commit f479009

File tree

14 files changed

+1057
-925
lines changed

14 files changed

+1057
-925
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@ npm-debug.log
1414
yarn-error.log
1515
/.idea
1616
/.vscode
17+
/public/assets
1718
**.zip

‎package-lock.json‎

Lines changed: 977 additions & 513 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,18 @@
2020
"browser-sync-webpack-plugin": "^2.3.0",
2121
"laravel-mix": "^6.0.49",
2222
"lodash": "^4.17.19",
23-
"postcss": "^8.1.14",
23+
"postcss-import": "^15.0.0",
24+
"resolve-url-loader": "^5.0.0",
2425
"sass": "^1.32.11",
26+
"sass-loader": "^13.0.2",
27+
"tailwindcss": "^3.1.8",
2528
"vue": "^3.2.37",
2629
"webpack-cli": "^4.10.0"
2730
},
2831
"dependencies": {
29-
"laravel-vite-plugin": "^0.5.4"
32+
"autoprefixer": "^10.4.9",
33+
"laravel-vite-plugin": "^0.5.4",
34+
"postcss": "^8.4.16",
35+
"vue-loader": "^17.0.0"
3036
}
3137
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
}
6+
};

‎public/mix-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"/dist/js/app.js": "/dist/js/app.js",
3-
"/dist/css/app.css": "/dist/css/app.css"
2+
"/assets/js/app.js": "/assets/js/app.js?id=e5bb8ceba9444465036c16b01d236f2b",
3+
"/assets/css/app.css": "/assets/css/app.css?id=0b373d0ac248e39242a69f9132bb9cc1"
44
}

‎resources/js/components/ExampleComponent.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1+
12
<template>
23
<div class="container">
34
<div class="row justify-content-center">
45
<div class="col-md-8">
56
<div class="card">
67
<div class="card-header">Example Component</div>
78

8-
<div class="card-body">
9-
I'm an example component.
10-
</div>
9+
<div class="card-body">// I'm an example component. //</div>
1110
</div>
1211
</div>
1312
</div>

‎resources/sass/app.scss‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
// Fonts
2-
@import url('https://fonts.googleapis.com/css?family=Nunito');
1+
// fonts
2+
@import url("https://fonts.googleapis.com/css?family=Nunito");
33

4-
// Variables
5-
@import 'variables';
4+
// common variables
5+
@import "variables";
66

7-
// Bootstrap
8-
@import 'bootstrap/scss/bootstrap';
7+
body {
8+
font-family: $font-family-sans-serif;
9+
}
10+
11+
@import "./partials/base-bootstrap.scss";
12+
13+
@import "./partials/base-tailwind.scss";

‎resources/sass/partials/base-bootstrap.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// bootstrap imports
2+
@import "bootstrap/scss/bootstrap";

‎resources/sass/partials/base-tailwind.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "tailwindcss/base";
2+
@import "tailwindcss/components";
3+
@import "tailwindcss/utilities";

‎resources/views/layouts/app.blade.php‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!doctype html>
22
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -16,14 +17,17 @@
1617
<!-- Scripts -->
1718
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
1819
</head>
20+
1921
<body>
2022
<div id="app">
21-
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
23+
<nav class="bg-white shadow-sm navbar navbar-expand-md navbar-light">
2224
<div class="container">
2325
<a class="navbar-brand" href="{{ url('/') }}">
2426
{{ config('app.name', 'Laravel') }}
2527
</a>
26-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
28+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
29+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
30+
aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
2731
<span class="navbar-toggler-icon"></span>
2832
</button>
2933

@@ -50,13 +54,14 @@
5054
@endif
5155
@else
5256
<li class="nav-item dropdown">
53-
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
57+
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
58+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
5459
{{ Auth::user()->name }}
5560
</a>
5661

5762
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
5863
<a class="dropdown-item" href="{{ route('logout') }}"
59-
onclick="event.preventDefault();
64+
onclick="event.preventDefault();
6065
document.getElementById('logout-form').submit();">
6166
{{ __('Logout') }}
6267
</a>
@@ -77,4 +82,5 @@
7782
</main>
7883
</div>
7984
</body>
85+
8086
</html>

0 commit comments

Comments
 (0)