","Getting Started
@@ -68,87 +67,91 @@
diff --git a/docs/source/buttons.md b/docs/source/buttons.md
deleted file mode 100644
index 0fc689d49..000000000
--- a/docs/source/buttons.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-extends: _layouts.markdown
-title: "Buttons"
----
-
-# Buttons
-
-
-
- Save
-
-
- Save
-
-
- Save
-
-
-
-
- Save
-
-
- Save
-
-
- Save
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
-
-
- Save
-
-
- Disabled
-
-
diff --git a/docs/source/changelog.md b/docs/source/changelog.md
deleted file mode 100644
index 1cb4e1d50..000000000
--- a/docs/source/changelog.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Changelog"
----
-
-# Changelog
diff --git a/docs/source/customization.md b/docs/source/customization.md
deleted file mode 100644
index c097aa87b..000000000
--- a/docs/source/customization.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Customization"
----
-
-# Customization
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
new file mode 100644
index 000000000..96476c29b
--- /dev/null
+++ b/docs/source/examples/alerts.blade.md
@@ -0,0 +1,19 @@
+---
+extends: _layouts.markdown
+title: "Alerts"
+---
+
+# Alerts
+
+We don't ship alert components because every app has it's own visual style, but they are easy af to make.
+
+@foreach($page->colors as $color)
+
+
+ Alert message
+
+
+ Some additional text to explain what happened.
+
+
Examples
+# Cards
-Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!
-
-Alerts
-
-@foreach($page->colors as $color)
-
-
- Alert message
-
-
- Some additional text to explain what happened.
-
-
Buttons
-
-Solid
-
-
-
- Save
-
-
- Save
-
-
- Save
-
-
-
-
- Save
-
-
- Save
-
-
- Save
-
-
-
-@foreach($page->colors as $color)
-
-
- Save
-
-
- Disabled
-
-
-@endforeach
-
-Outline
-
-@foreach($page->colors as $color)
-
-
- Save
-
-
- Disabled
-
-
-@endforeach
-
-Cards
+We don't ship alert components because every app has it's own visual style, but they are easy af to make.
-@endsection
diff --git a/docs/source/forms.md b/docs/source/forms.md
deleted file mode 100644
index d6b334f95..000000000
--- a/docs/source/forms.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Forms"
----
-
-# Forms
diff --git a/docs/source/installation.md b/docs/source/installation.md
index 7298656c7..e91bfe090 100644
--- a/docs/source/installation.md
+++ b/docs/source/installation.md
@@ -5,8 +5,6 @@ title: "Installation"
# Installation
-Install Tailwind using NPM:
-
-```bash
+```sh
npm install tailwindcss
```
diff --git a/docs/source/principles.md b/docs/source/principles.md
deleted file mode 100644
index 14ce39423..000000000
--- a/docs/source/principles.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Principles"
----
-
-# Principles
diff --git a/docs/source/responsive.md b/docs/source/responsive.md
deleted file mode 100644
index f15b4155a..000000000
--- a/docs/source/responsive.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Responsive"
----
-
-# Responsive
diff --git a/docs/source/utilities/alignment.md b/docs/source/styles/alignment.md
similarity index 100%
rename from docs/source/utilities/alignment.md
rename to docs/source/styles/alignment.md
diff --git a/docs/source/utilities/appearance.md b/docs/source/styles/appearance.md
similarity index 100%
rename from docs/source/utilities/appearance.md
rename to docs/source/styles/appearance.md
diff --git a/docs/source/utilities/backgrounds.md b/docs/source/styles/backgrounds.md
similarity index 100%
rename from docs/source/utilities/backgrounds.md
rename to docs/source/styles/backgrounds.md
diff --git a/docs/source/utilities/backgrounds/color.md b/docs/source/styles/backgrounds/color.md
similarity index 100%
rename from docs/source/utilities/backgrounds/color.md
rename to docs/source/styles/backgrounds/color.md
diff --git a/docs/source/utilities/backgrounds/position.md b/docs/source/styles/backgrounds/position.md
similarity index 100%
rename from docs/source/utilities/backgrounds/position.md
rename to docs/source/styles/backgrounds/position.md
diff --git a/docs/source/utilities/backgrounds/size.md b/docs/source/styles/backgrounds/size.md
similarity index 100%
rename from docs/source/utilities/backgrounds/size.md
rename to docs/source/styles/backgrounds/size.md
diff --git a/docs/source/styles/base.md b/docs/source/styles/base.md
new file mode 100644
index 000000000..e5a258ed3
--- /dev/null
+++ b/docs/source/styles/base.md
@@ -0,0 +1,14 @@
+---
+extends: _layouts.markdown
+title: "Base"
+---
+
+# Base
+
+
+
+Document our base styles.
diff --git a/docs/source/utilities/borders.md b/docs/source/styles/borders.md
similarity index 100%
rename from docs/source/utilities/borders.md
rename to docs/source/styles/borders.md
diff --git a/docs/source/utilities/borders/base.md b/docs/source/styles/borders/base.md
similarity index 100%
rename from docs/source/utilities/borders/base.md
rename to docs/source/styles/borders/base.md
diff --git a/docs/source/utilities/borders/color.md b/docs/source/styles/borders/color.md
similarity index 100%
rename from docs/source/utilities/borders/color.md
rename to docs/source/styles/borders/color.md
diff --git a/docs/source/utilities/borders/radius.md b/docs/source/styles/borders/radius.md
similarity index 100%
rename from docs/source/utilities/borders/radius.md
rename to docs/source/styles/borders/radius.md
diff --git a/docs/source/utilities/borders/style.md b/docs/source/styles/borders/style.md
similarity index 100%
rename from docs/source/utilities/borders/style.md
rename to docs/source/styles/borders/style.md
diff --git a/docs/source/styles/buttons.blade.md b/docs/source/styles/buttons.blade.md
new file mode 100644
index 000000000..2510254b3
--- /dev/null
+++ b/docs/source/styles/buttons.blade.md
@@ -0,0 +1,63 @@
+---
+extends: _layouts.markdown
+title: "Buttons"
+---
+
+# Buttons
+
+
+
+Document how to create buttons of various styles, like solid rounded buttons, outline buttons, pill buttons, etc.
+
+### Solid
+
+
+
+ Save
+
+
+ Save
+
+
+ Save
+
+
+
+
+ Save
+
+
+ Save
+
+
+ Save
+
+
+
+@foreach($page->colors as $color)
+
+
+ Save
+
+
+ Disabled
+
+
+@endforeach
+
+Outline
+
+@foreach($page->colors as $color)
+
+
+ Save
+
+
+ Disabled
+
+
+@endforeach
diff --git a/docs/source/utilities/container.md b/docs/source/styles/container.md
similarity index 100%
rename from docs/source/utilities/container.md
rename to docs/source/styles/container.md
diff --git a/docs/source/utilities/display.md b/docs/source/styles/display.md
similarity index 91%
rename from docs/source/utilities/display.md
rename to docs/source/styles/display.md
index 886458622..7f3bdd8f6 100644
--- a/docs/source/utilities/display.md
+++ b/docs/source/styles/display.md
@@ -11,7 +11,7 @@ title: "Display"
Customizing
-> If you're looking for Flexbox utilities, see the [Flexbox](/flexbox) page.
+> If you're looking for Flexbox utilities, see the [Flexbox](/styles/flexbox) page.
The display utilities simply `display` property helpers.
diff --git a/docs/source/utilities/flexbox.md b/docs/source/styles/flexbox.md
similarity index 100%
rename from docs/source/utilities/flexbox.md
rename to docs/source/styles/flexbox.md
diff --git a/docs/source/utilities/floats.md b/docs/source/styles/floats.md
similarity index 100%
rename from docs/source/utilities/floats.md
rename to docs/source/styles/floats.md
diff --git a/docs/source/styles/forms.md b/docs/source/styles/forms.md
new file mode 100644
index 000000000..12db1c54f
--- /dev/null
+++ b/docs/source/styles/forms.md
@@ -0,0 +1,18 @@
+---
+extends: _layouts.markdown
+title: "Forms"
+---
+
+# Forms
+
+
+
+Include documentation around:
+
+- `appearance-none` helper
+- Creating input groups/custom selects and using `pointer-events-none`
+- The placeholder text styling in our base styles
diff --git a/docs/source/grid.md b/docs/source/styles/grid.md
similarity index 94%
rename from docs/source/grid.md
rename to docs/source/styles/grid.md
index b6beb0363..18e5adeb0 100644
--- a/docs/source/grid.md
+++ b/docs/source/styles/grid.md
@@ -5,6 +5,19 @@ title: "Grid"
# Grid
+
+
+Documentation around things like:
+
+- Using percentage width helpers and a flex container to create columns
+- Using flex wrap if you want columns to wrap
+- Using negative margin and padding helpers to add gutters
+- Using the container class if you really give a shit
+
Basic grid example:
diff --git a/docs/source/utilities/interactivity/cursor.md b/docs/source/styles/interactivity/cursor.md
similarity index 100%
rename from docs/source/utilities/interactivity/cursor.md
rename to docs/source/styles/interactivity/cursor.md
diff --git a/docs/source/utilities/interactivity/pointer-events.md b/docs/source/styles/interactivity/pointer-events.md
similarity index 100%
rename from docs/source/utilities/interactivity/pointer-events.md
rename to docs/source/styles/interactivity/pointer-events.md
diff --git a/docs/source/utilities/interactivity/resize.md b/docs/source/styles/interactivity/resize.md
similarity index 100%
rename from docs/source/utilities/interactivity/resize.md
rename to docs/source/styles/interactivity/resize.md
diff --git a/docs/source/utilities/interactivity/user-select.md b/docs/source/styles/interactivity/user-select.md
similarity index 100%
rename from docs/source/utilities/interactivity/user-select.md
rename to docs/source/styles/interactivity/user-select.md
diff --git a/docs/source/utilities/opacity.md b/docs/source/styles/opacity.md
similarity index 100%
rename from docs/source/utilities/opacity.md
rename to docs/source/styles/opacity.md
diff --git a/docs/source/utilities/overflow.md b/docs/source/styles/overflow.md
similarity index 100%
rename from docs/source/utilities/overflow.md
rename to docs/source/styles/overflow.md
diff --git a/docs/source/utilities/positioning.md b/docs/source/styles/positioning.md
similarity index 100%
rename from docs/source/utilities/positioning.md
rename to docs/source/styles/positioning.md
diff --git a/docs/source/utilities/shadows.md b/docs/source/styles/shadows.md
similarity index 100%
rename from docs/source/utilities/shadows.md
rename to docs/source/styles/shadows.md
diff --git a/docs/source/utilities/sizing/height.md b/docs/source/styles/sizing/height.md
similarity index 100%
rename from docs/source/utilities/sizing/height.md
rename to docs/source/styles/sizing/height.md
diff --git a/docs/source/utilities/sizing/max-height.md b/docs/source/styles/sizing/max-height.md
similarity index 100%
rename from docs/source/utilities/sizing/max-height.md
rename to docs/source/styles/sizing/max-height.md
diff --git a/docs/source/utilities/sizing/max-width.md b/docs/source/styles/sizing/max-width.md
similarity index 100%
rename from docs/source/utilities/sizing/max-width.md
rename to docs/source/styles/sizing/max-width.md
diff --git a/docs/source/utilities/sizing/min-height.md b/docs/source/styles/sizing/min-height.md
similarity index 100%
rename from docs/source/utilities/sizing/min-height.md
rename to docs/source/styles/sizing/min-height.md
diff --git a/docs/source/utilities/sizing/min-width.md b/docs/source/styles/sizing/min-width.md
similarity index 100%
rename from docs/source/utilities/sizing/min-width.md
rename to docs/source/styles/sizing/min-width.md
diff --git a/docs/source/utilities/sizing/width.md b/docs/source/styles/sizing/width.md
similarity index 100%
rename from docs/source/utilities/sizing/width.md
rename to docs/source/styles/sizing/width.md
diff --git a/docs/source/utilities/spacing/margin.md b/docs/source/styles/spacing/margin.md
similarity index 100%
rename from docs/source/utilities/spacing/margin.md
rename to docs/source/styles/spacing/margin.md
diff --git a/docs/source/utilities/spacing/negative-margin.md b/docs/source/styles/spacing/negative-margin.md
similarity index 100%
rename from docs/source/utilities/spacing/negative-margin.md
rename to docs/source/styles/spacing/negative-margin.md
diff --git a/docs/source/utilities/spacing/padding.md b/docs/source/styles/spacing/padding.md
similarity index 100%
rename from docs/source/utilities/spacing/padding.md
rename to docs/source/styles/spacing/padding.md
diff --git a/docs/source/styles/svg.md b/docs/source/styles/svg.md
new file mode 100644
index 000000000..d81104c6e
--- /dev/null
+++ b/docs/source/styles/svg.md
@@ -0,0 +1,17 @@
+---
+extends: _layouts.markdown
+title: "SVG"
+---
+
+# SVG
+
+
+
+Documentation around things like:
+
+- The `currentColor` trick in our base styles and using text color utilities to style SVG icons
+- Using sizing helpers to style SVGs
diff --git a/docs/source/utilities/text/alignment.md b/docs/source/styles/text/alignment.md
similarity index 100%
rename from docs/source/utilities/text/alignment.md
rename to docs/source/styles/text/alignment.md
diff --git a/docs/source/utilities/text/color.md b/docs/source/styles/text/color.md
similarity index 100%
rename from docs/source/utilities/text/color.md
rename to docs/source/styles/text/color.md
diff --git a/docs/source/utilities/text/fonts.md b/docs/source/styles/text/fonts.md
similarity index 100%
rename from docs/source/utilities/text/fonts.md
rename to docs/source/styles/text/fonts.md
diff --git a/docs/source/utilities/text/letter-spacing.md b/docs/source/styles/text/letter-spacing.md
similarity index 100%
rename from docs/source/utilities/text/letter-spacing.md
rename to docs/source/styles/text/letter-spacing.md
diff --git a/docs/source/utilities/text/line-height.md b/docs/source/styles/text/line-height.md
similarity index 100%
rename from docs/source/utilities/text/line-height.md
rename to docs/source/styles/text/line-height.md
diff --git a/docs/source/utilities/text/sizing.md b/docs/source/styles/text/sizing.md
similarity index 100%
rename from docs/source/utilities/text/sizing.md
rename to docs/source/styles/text/sizing.md
diff --git a/docs/source/utilities/text/style.md b/docs/source/styles/text/style.md
similarity index 100%
rename from docs/source/utilities/text/style.md
rename to docs/source/styles/text/style.md
diff --git a/docs/source/utilities/text/weight.md b/docs/source/styles/text/weight.md
similarity index 100%
rename from docs/source/utilities/text/weight.md
rename to docs/source/styles/text/weight.md
diff --git a/docs/source/utilities/text/wrapping.md b/docs/source/styles/text/wrapping.md
similarity index 100%
rename from docs/source/utilities/text/wrapping.md
rename to docs/source/styles/text/wrapping.md
diff --git a/docs/source/utilities/visibility.md b/docs/source/styles/visibility.md
similarity index 100%
rename from docs/source/utilities/visibility.md
rename to docs/source/styles/visibility.md
diff --git a/docs/source/utilities/z-index.md b/docs/source/styles/z-index.md
similarity index 100%
rename from docs/source/utilities/z-index.md
rename to docs/source/styles/z-index.md