README.md

@@ -29,7 +29,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 ## Features
 
-- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2)
+- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
 - Lightweight, 43kB first load JS, uses Preact in production build
 - Mobile-friendly view
@@ -95,7 +95,7 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `public/static` - store assets such as images and favicons.
 
-`css/tailwind.css` - contains the tailwind stylesheet which can be modified to change the overall look and feel of the site.
+`tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
 
 `components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons uses [heroicons](https://heroicons.com/).
 

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -34,7 +34,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 ## Features
 
-- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2)
+- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
 - Lightweight, 43kB first load JS, uses Preact in production build
 - Mobile-friendly view
@@ -99,7 +99,7 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `public/static` - store assets such as images and favicons.
 
-`css/tailwind.css` - contains the tailwind stylesheet which can be modified to change the overall look and feel of the site.
+`tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
 
 `components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons uses [heroicons](https://heroicons.com/).
 

data/blog/new-features-in-v1.mdx

@@ -11,10 +11,32 @@ layout: PostSimple
 
 A post on the new features introduced in v1.0. New features:
 
+- [Theme colors](#theme-colors)
 - [Layouts](#layouts)
 - [Multiple authors](#multiple-authors)
 - [Copy button for code blocks](#copy-button-for-code-blocks)
 
+## Theme colors
+
+You can easily modify the theme color by changing the primary attribute in the tailwind config file:
+
+```:tailwind.config.js
+theme: {
+    colors: {
+      primary: colors.teal,
+      gray: colors.trueGray,
+      ...
+    }
+  ...
+}
+```
+
+The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.
+
+Tailwind includes great default color palettes that can be used for theming your own website. Check out [customizing colors documentation page](https://tailwindcss.com/docs/customizing-colors) for the full range of options.
+
+Migrating from v1? You can revert to the previous theme by setting `primary` to `colors.sky` (Tailwind 2.2.2 and above, otherwise `colors.lightBlue`) and changing gray to `colors.coolGray`.
+
 ## Layouts
 
 You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new `PostSimple` layout!

tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       colors: {
-        primary: colors.cyan,
+        primary: colors.teal,
         gray: colors.trueGray,
         code: {
           green: '#b5f4a5',