archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Extract reset to separate file, inline SUIT CSS Base, rename @tailwind at-rules

Browse Source
This commit is contained in:
Adam Wathan 2017-10-11 09:35:04 -04:00
parent 57cb4159a4
commit cd41069cba
17 changed files with 170 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
css/preflight.css Normal file
View File

@ -0,0 +1,107 @@
@import "normalize.css";
/**
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
* A thin layer on top of normalize.css that provides a starting point more
* suitable for web applications.
*/
/**
* 1. Prevent padding and border from affecting element width
* https://goo.gl/pYtbK7
* 2. Change the default font family in all browsers (opinionated)
*/
html {
box-sizing: border-box; /* 1 */
font-family: sans-serif; /* 2 */
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/**
* Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
margin: 0;
}
button {
background: transparent;
border: 0;
padding: 0;
}
/**
* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
iframe {
border: 0;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
*/
[tabindex="-1"]:focus {
outline: none !important;
}
/**
* Tailwind custom reset styles
*/
textarea { resize: vertical; }
img { max-width: 100%; }
svg { fill: currentColor; }
input { font-family: inherit; }
input::placeholder {
color: inherit;
opacity: .7;
}
button, [role=button] {
font-family: inherit;
cursor: pointer;
}

3
css/tailwind.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind reset;
@tailwind utilities;

62
dist/tailwind.css vendored
View File

@ -1,4 +1,4 @@
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@ -18,6 +18,14 @@ html {
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
@ -225,7 +233,8 @@ svg:not(:root) {
========================================================================== */
/**
* Remove the margin in Firefox and Safari.
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
@ -233,7 +242,10 @@ input,
optgroup,
select,
textarea {
margin: 0;
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
@ -292,6 +304,14 @@ button:-moz-focusring,
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
@ -427,6 +447,7 @@ template {
}
/**
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
* A thin layer on top of normalize.css that provides a starting point more
* suitable for web applications.
*/
@ -434,7 +455,7 @@ template {
/**
* 1. Prevent padding and border from affecting element width
* https://goo.gl/pYtbK7
* 2. Change the default font family in all browsers
* 2. Change the default font family in all browsers (opinionated)
*/
html {
@ -452,7 +473,6 @@ html {
* Removes the default spacing and border for appropriate elements.
*/
body,
blockquote,
dl,
dd,
@ -512,39 +532,9 @@ ul {
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers.
* Tailwind custom reset styles
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* Change the font styles in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
}
/**
* Change the border, margin, and padding in all browsers.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
textarea {
resize: vertical;
}

2
dist/tailwind.css.map vendored
View File

File diff suppressed because one or more lines are too long

3
docs/package.json
View File

@ -23,8 +23,7 @@
"lodash": "^4.17.4",
"normalize.css": "^7.0.0",
"postcss-cssnext": "^3.0.2",
"stylefmt": "^6.0.0",
"suitcss-base": "^3.0.0"
"stylefmt": "^6.0.0"
},
"browserslist": [
"> 1%"

21
docs/source/_assets/less/base.less
View File

@ -1,11 +1,4 @@
@import (less) "../../../node_modules/normalize.css/normalize.css";
@import (less) "../../../node_modules/suitcss-base/lib/base.css";
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@viewport { width: device-width; }
@tailwind reset;
html {
@apply .bg-brand-soft;
@ -37,18 +30,6 @@ body {
line-height: 1.5;
}
textarea {
resize: vertical;
}
button, [role=button] {
cursor: pointer;
}
small {
@apply .text-sm;
}
pre, code {
@apply .mono;
}

2
docs/source/_assets/less/main.less
View File

@ -4,7 +4,7 @@
@import "markdown";
@import "container";
@tailwind-utilities all;
@tailwind utilities;
@import "utilities";

5
docs/source/_assets/less/markdown.less
View File

@ -26,9 +26,14 @@
@apply .leading-none;
@apply .wrap-none;
@apply .text-pink-dark;
@apply .mono;
vertical-align: middle;
}
> pre, pre& {
@apply .mono;
}
> blockquote, blockquote& {
@apply .text-em;
@apply .text-dark-soft;

5
docs/source/_layouts/master.blade.php
View File

@ -69,6 +69,7 @@
<div class="mt-8">
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Styles</p>
<ul class="mb-8">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
<li class="mb-2">
@ -79,7 +80,6 @@
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
</ul>
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
@ -130,7 +130,7 @@
</li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-dark text-medium' : 'text-dark-soft' }}">SVG</a></li>
<li class="mb-2">
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Typography</a>
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
@ -138,7 +138,6 @@
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style &amp; Decoration</a></li>
</ul>

1
docs/source/styles/borders/base.md
View File

@ -5,7 +5,6 @@ title: "Borders"
# Borders
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>

12
docs/source/styles/text/alignment.md
View File

@ -1,12 +0,0 @@
---
extends: _layouts.markdown
title: "Text Alignment"
---
# Text Alignment
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
</div>

5
package.json
View File

@ -36,12 +36,11 @@
"commander": "^2.11.0",
"lodash": "^4.17.4",
"nodemon": "^1.11.0",
"normalize.css": "^6.0.0",
"normalize.css": "^7.0.0",
"postcss": "^6.0.9",
"postcss-import": "^11.0.0",
"postcss-functions": "^3.0.0",
"stylefmt": "^6.0.0",
"suitcss-base": "^3.0.0"
"stylefmt": "^6.0.0"
},
"browserslist": [
"> 1%"

4
src/build.js
View File

@ -5,10 +5,10 @@ import defaultConfig from './defaultConfig'
console.info('Building Tailwind!')
fs.readFile('./src/tailwind.css', (err, css) => {
fs.readFile('./css/tailwind.css', (err, css) => {
postcss([tailwind(defaultConfig)])
.process(css, {
from: './tailwind.css',
from: './css/tailwind.css',
to: './dist/tailwind.css',
map: {inline: false},
})

4
src/lib/generateUtilities.js
View File

@ -38,8 +38,8 @@ import zIndex from '../generators/zIndex'
export default function(options) {
return function(css) {
css.walkAtRules('tailwind-utilities', atRule => {
if (atRule.params === 'all') {
css.walkAtRules('tailwind', atRule => {
if (atRule.params === 'utilities') {
const utilities = _.flatten([
appearance(options),
textSizes(options),

31
src/lib/substituteResetAtRule.js
View File

@ -1,3 +1,4 @@
import fs from 'fs'
import postcss from 'postcss'
import postcssImport from 'postcss-import'
@ -6,27 +7,15 @@ export default function(options) {
return new Promise((resolve, reject) => {
const promises = []
css.walkAtRules('tailwind-reset', atRule => {
promises.push(postcssImport.process(postcss.parse(`
@import "normalize.css";
@import "suitcss-base";
textarea { resize: vertical; }
img { max-width: 100%; }
svg { fill: currentColor; }
input { font-family: inherit; }
input::placeholder {
color: inherit;
opacity: .7;
}
button, [role=button] {
font-family: inherit;
cursor: pointer;
}
`)).then(result => {
atRule.before(result.root)
atRule.remove()
}))
css.walkAtRules('tailwind', atRule => {
if (atRule.params === 'reset') {
promises.push(postcssImport.process(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, {
encoding: 'utf8'
}))).then(result => {
atRule.before(result.root)
atRule.remove()
}))
}
})
Promise.all(promises).then(resolve)

3
src/tailwind.css
View File

@ -1,3 +0,0 @@
@tailwind-reset;
@tailwind-utilities all;

14
yarn.lock
View File

@ -2837,9 +2837,9 @@ normalize-selector@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
normalize.css@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-6.0.0.tgz#22188c2707c911fb3ad3c1aac0677ff68661bea8"
normalize.css@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
npm-run-path@^2.0.0:
version "2.0.2"
@ -3777,11 +3777,11 @@ sugarss@^0.2.0:
dependencies:
postcss "^5.2.4"
suitcss-base@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/suitcss-base/-/suitcss-base-3.0.0.tgz#83dd53629c37adbdeac11ef6439a7f2ed955f05e"
suitcss-base@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/suitcss-base/-/suitcss-base-4.0.0.tgz#f3374526410c90e28a3fd8435947f1caa6146eb6"
dependencies:
normalize.css "^6.0.0"
normalize.css "^7.0.0"
supports-color@^2.0.0:
version "2.0.0"