Markus evdama

7 followers · 2 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

evdama / tailwind.config.js

Last active July 22, 2019 04:22

using CSS variables for theming with tailwind

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / tailwind.css

Last active July 22, 2019 03:24

	@import "tailwindcss/base";
	@import "tailwindcss/components";
	@import './components';
	@import "tailwindcss/utilities";
	@import './edm-utilities';


	:root {
	--font-primary: Montserrat, sans-serif;
	--font-secondary: Roboto, sans-serif;

evdama / tailwind.config.js

Created July 20, 2019 12:24

adding breakpoints to the default ones

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / tailwind.config.js

Last active July 22, 2019 03:28

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / tailwind.config.js

Created July 19, 2019 02:20

fixed now, can't take built-in and custom colors at the same time

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / tailwind.config.js

Created July 18, 2019 18:35

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / custom-styles.css

Last active July 17, 2019 15:44

	h1 {
	@apply text-2xl;
	}

	h2 {
	@apply text-xl;
	}

	h3 {
	@apply text-lg;

evdama / tailwind.config.js

Created July 17, 2019 14:51

make h1 h2 and h3 responsive variants?

	const colors = {
	transparent: 'transparent',
	black: '#000000',
	white: '#FFFFFF',

	'red-50': '#FFEBEE',
	'red-100': '#FFCDD2',
	'red-200': '#EF9A9A',
	'red-300': '#E57373',
	'red-400': '#EF5350',

evdama / rollup.config.js

Created July 16, 2019 15:53

postcss-import and tailwind apply issue?

	// @ts-nocheck
	// TODO: remove once there are typings in place

	import babel from 'rollup-plugin-babel';
	import commonjs from 'rollup-plugin-commonjs';
	import config from 'sapper/config/rollup.js';
	import getPreprocessor from 'svelte-preprocess'
	import path from 'path'
	import pkg from './package.json';
	import postcss from 'rollup-plugin-postcss'

evdama / tailwind.css

Created July 16, 2019 11:39

	@import "tailwindcss/base";


	h1 {
	@apply text-2xl;
	}
	/*
	.h1:md {
	@apply text-3xl;
	}