Skip to content
Permalink
Browse files

add tailwindcss through postcss

  • Loading branch information...
givanse committed Oct 31, 2019
1 parent b6566b4 commit 3889ec766c576220073e187baf1790776f33988b
@@ -26,8 +26,10 @@
"jest": "^21.2.1",
"jest-preset-preact": "^1.0.0",
"per-env": "^1.0.2",
"postcss-custom-media": "^7.0.8",
"preact-cli": "^2.1.0",
"preact-render-spy": "^1.2.1"
"preact-render-spy": "^1.2.1",
"tailwindcss": "^1.1.3"
},
"dependencies": {
"preact": "^8.5.2",
@@ -0,0 +1,16 @@
import tailwindcss from 'tailwindcss';
import postcssCustomMedia from 'postcss-custom-media';

export default function(config, env, helpers) {

const results = helpers.getLoadersByName(config, 'postcss-loader');
for (const result of results) {
result.loader.options.plugins = [
postcssCustomMedia,
tailwindcss('./tailwind.config.js'),
...result.loader.options.plugins
];
}

return config;
};
@@ -6,7 +6,7 @@ export default class TheFooter extends Component {
render() {

return (
<footer class="h-32 bg-orange-400 text-center p-4 pt-12 mt-8">
<footer>
<a class="underline font-bold"
href="https://bitcoin.org/en/faq#is-bitcoin-really-used-by-people">
Is Bitcoin really used by people?
@@ -1 +1,4 @@

footer {
@apply h-32 bg-orange-400 text-center p-4 pt-12 mt-8;
}
@@ -53,10 +53,7 @@ export default class TheForm extends Component {
<form class="text-center"
onSubmit={e => e.preventDefault()}>
<input name="btc-hodl"
class="
sm:w-screen md:w-11/12 lg:w-6/12
text-center text-2xl
py-2 px-4 m-4 bg-blue-100 focus:bg-white"
class={style['btc-hodl']}
placeholder="bitcoin amount_"
onChange={e => this.updateBtcHodl(e)} />
</form>
@@ -1 +1,35 @@
.btc-hodl {
@apply text-center text-2xl py-2 px-4 m-4 bg-blue-100 w-10/12;
}

.btc-hodl:focus {
@apply bg-white;
}

/* Small (sm) */
@media (min-width: 640px) {
.btc-hodl {
@apply w-8/12;
}
}

/* Medium (md) */
@media (min-width: 768px) {
.btc-hodl {
@apply w-6/12;
}
}

/* Large (lg) */
@media (min-width: 1024px) {
.btc-hodl {
@apply w-4/12;
}
}

/* Extra Large (xl) */
@media (min-width: 1280px) {
.btc-hodl {
@apply w-3/12;
}
}
@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
@@ -1,3 +1,6 @@
@tailwind base;
@tailwind utilities;

h1, h2, h3, h4, h5, h6, h7, h8 {
text-align: center;
font-family: sans-serif;
@@ -0,0 +1,7 @@
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}

0 comments on commit 3889ec7

Please sign in to comment.
You can’t perform that action at this time.