Add and use postcss-import

This commit is contained in:
Oliver Davies 2019-06-07 14:31:51 +01:00
parent ef7bd514c2
commit f9be621fff
5 changed files with 28 additions and 20 deletions

View file

@ -0,0 +1,13 @@
a {
@apply text-gray-600 no-underline
}
a:hover,
a:focus {
@apply text-blue-800;
}
h2:before {
content: '';
@apply w-10 block border-t-2 border-gray-600 mb-4;
}

View file

@ -0,0 +1,3 @@
.screen-reader-text {
@apply absolute opacity-0 pointer-events-none;
}

View file

@ -3,28 +3,16 @@ Theme Name: Twenty Nineteen - Tailwind CSS
Template: twentynineteen
*/
@tailwind base;
/* Tailwind base styles */
@import 'tailwindcss/base';
a {
@apply text-gray-600 no-underline
}
/* Custom base styles */
@import 'base.css';
a:hover,
a:focus {
@apply text-blue-800;
}
@tailwind components;
h2:before {
content: '';
@apply w-10 block border-t-2 border-gray-600 mb-4;
}
.screen-reader-text {
@apply absolute opacity-0 pointer-events-none;
}
/* Tailwind components */
@import 'tailwindcss/components';
/* Custom components */
@import 'components/avatars.css';
@import 'components/comment-form.css';
@import 'components/comment-list.css';
@ -34,6 +22,8 @@ h2:before {
@import 'components/main-menu.css';
@import 'components/page-title.css';
@import 'components/post.css';
@import 'components/screen-reader-text.css';
@import 'components/widgets.css';
@tailwind utilities;
/* Tailwind utilities */
@import 'tailwindcss/utilities';

View file

@ -13,6 +13,7 @@
"browser-sync-webpack-plugin": "2.0.1",
"cross-env": "^5.2.0",
"laravel-mix": "^4.0.14",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.1.2",
"tailwindcss": "^1.0.0-beta.3"
}

View file

@ -2,6 +2,7 @@ let mix = require('laravel-mix')
mix.disableNotifications()
.postCss('assets/css/main.css', 'style.css', [
require('postcss-import')(),
require('tailwindcss')(),
require('postcss-nested')(),
])