Skip to content

Commit 7f323a6

Browse files
adamwathanadamwathan
committed
Init
0 parents  commit 7f323a6

23 files changed

+7912
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.next
2+
node_modules
3+
package-lock.json

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
docs
2+
node_modules
3+
.next
4+
package-lock.json
5+
yarn.lock

‎README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Tailwind CSS Typography
2+
3+
**Still very much a work-in-progress, not ready for use.**
4+
5+
A plugin that provides a `rich-text` class you can use to add sensible typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
6+
7+
```html
8+
<div class="rich-text">
9+
{{ markdown }}
10+
</div>
11+
```
12+

‎css/motion.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@tailwind utilities;

‎dist/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*
2+
!.gitignore
3+
!.npmignore

‎dist/.npmignore

Whitespace-only changes.

‎docs/assets/css/tailwind.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:root {
2+
--color-code-green: #b5f4a5;
3+
--color-code-yellow: #ffe484;
4+
--color-code-purple: #d9a9ff;
5+
--color-code-red: #ff8383;
6+
--color-code-blue: #93ddfd;
7+
--color-code-white: #fff;
8+
}
9+
10+
@tailwind base;
11+
@tailwind components;
12+
13+
.markdown {
14+
> * + * {
15+
@apply mt-6
16+
}
17+
> hr {
18+
@apply my-10 border-b
19+
}
20+
> h1 {
21+
@apply text-4xl font-bold leading-none
22+
}
23+
> h2 {
24+
@apply text-2xl font-bold leading-tight
25+
}
26+
> h3 {
27+
@apply mt-10 text-xl font-semibold leading-tight
28+
}
29+
> h4 {
30+
@apply mt-10 text-lg font-semibold leading-tight
31+
}
32+
> h2 + h3 {
33+
@apply mt-6
34+
}
35+
> h3 code {
36+
@apply bg-gray-200 text-lg text-gray-700 font-bold tracking-tighter
37+
}
38+
> p {
39+
@apply text-gray-700 leading-relaxed
40+
}
41+
> p a {
42+
@apply text-gray-900 underline
43+
}
44+
> p code, > ul code {
45+
@apply text-sm font-bold text-gray-700 bg-gray-200
46+
}
47+
> ul {
48+
@apply list-disc list-inside pl-2
49+
}
50+
> ul li {
51+
@apply mt-2
52+
}
53+
}
54+
55+
.hljs {
56+
@apply subpixel-antialiased;
57+
display: block;
58+
overflow-x: auto;
59+
padding: theme('spacing.0');
60+
font-size: theme('fontSize.sm');
61+
line-height: theme('lineHeight.normal');
62+
color: var(--color-code-white);
63+
background: transparent;
64+
border-radius: theme('borderRadius.lg');
65+
}
66+
.hljs-comment, .hljs-quote {
67+
color: theme('colors.gray.500');
68+
font-style: italic;
69+
}
70+
.hljs-name {
71+
color: var(--color-code-red);
72+
}
73+
.hljs-string {
74+
color: var(--color-code-green);
75+
}
76+
.hljs-attr {
77+
color: var(--color-code-yellow);
78+
}
79+
80+
@tailwind utilities;
81+
82+
.origin-top-right {
83+
transform-origin: top right;
84+
}
85+
.scale-70 {
86+
transform: scale(.7);
87+
}
88+
.scale-80 {
89+
transform: scale(.8);
90+
}
91+
.scale-90 {
92+
transform: scale(.9);
93+
}
94+
.scale-100 {
95+
transform: scale(1);
96+
}

‎docs/components/CodeBlock.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Highlight from 'react-highlight'
2+
3+
export default ({ children, className }) => (
4+
<div className="rounded-lg p-6 bg-gray-800 overflow-x-auto text-gray-400 text-sm">
5+
<Highlight className={`language-${className.replace(/language-/, '')}`}>{children}</Highlight>
6+
</div>
7+
)

‎docs/components/CodeSample.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import dedent from 'dedent'
2+
import Highlight from 'react-highlight'
3+
4+
export default (props) => {
5+
const formattedCode = dedent`${props.code}`
6+
7+
const preview = () => {
8+
if (props.children) {
9+
return (
10+
<div>
11+
{props.children}
12+
</div>
13+
)
14+
} else {
15+
return (
16+
<div dangerouslySetInnerHTML={{ __html: formattedCode }}/>
17+
)
18+
}
19+
}
20+
21+
return (
22+
<div className="relative overflow-hidden mb-8">
23+
<div className="bg-white rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400 p-4">
24+
<div className="max-w-sm mx-auto">{preview()}</div>
25+
</div>
26+
<div className="rounded-b-lg p-4 bg-gray-800">
27+
<Highlight className="language-html">{formattedCode}</Highlight>
28+
</div>
29+
</div>
30+
)
31+
}

‎docs/components/Layout.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Head from 'next/head'
2+
3+
export default ({ meta, children }) => {
4+
return (
5+
<div className="antialiased text-gray-900">
6+
<Head>
7+
<title>{meta.title}</title>
8+
</Head>
9+
<div className="max-w-2xl w-full mx-auto px-6 py-12">
10+
{ children }
11+
</div>
12+
</div>
13+
)
14+
}

0 commit comments

Comments
 (0)