{"pageProps":{"contents":[{"slug":"dark-mode-in-tailwindcss","title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","content":"\nThere are two ways to quickly add dark mode to your Tailwind CSS projects.\nThe first one is the quickest and easiest way. The second one is your choice if you want to have a controlled theme switch.\n\n# 1. Screen Config\n\nThis is a little hack and you can't manually switch the theme as it detects the theme from the user's operating system.\n\n## Set Config\n\nExtend your `tailwind.config.js` theme by adding a new screen type.\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n screens: {\n dark: { raw: '(prefers-color-scheme: dark)' },\n },\n },\n },\n}\n```\n\n## Use Styles\n\nYou can now use it like you would use different screen sizes.\n\n```html\n\n```\n\nIt's also possible to add states like _hover_ into the dark mode.\n\n```html\n\n```\n\n# 2. Plugin\n\nAnother, more clean way and with the possibility to switch the theme manually is the plugin [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode)\n\nAdd the class `` to see the dark mode or remove it to see the regular theme.\n","type":"tip","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","image":null,"updatedAt":null,"readingTime":{"text":"1 min read","minutes":0.87,"time":52200,"words":174},"data":{"title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","updatedAt":null,"type":"tip"}},{"slug":"this-blog-is-open-source","title":"This Blog Is Open Source","description":"Use this blog to start your own. Be online within minutes by add your data, choose your favorite color and write your first article.","content":"\nThis blog is built with [Next.js](https://nextjs.org) using [Tailwind CSS](https://tailwindcss.com) for styling.\nThe source code is on [GitHub](https://github.com/lailo/lailo.ch) and it's deployed on [Zeit's Now](https://zeit.co).\n\n# Get Started\n\nTo get started, you only need to pull or fork the repository, update some config variables and choose your favorite color.\nYou can find a step-by-step instruction in the [README.md ](https://github.com/lailo/lailo.ch/blob/master/README.md) of the project.\n\n# Add Article\n\nAdding new posts is as simple as creating a new Markdown file inside the `/articles` folder and pushing it to GitHub's `master` branch.\n\n## Meta Data\n\nIt's important that you keep the meta data at the top of the file.\n\n```yml\n---\ntitle: 'This Blog Is Open Source'\ndescription: 'Use this blog to ....'\ntags: ['open-source', 'web', 'react', 'nextjs', 'tailwind-css']\npublishedAt: '2020-03-29T19:14:12.215Z'\nupdatedAt: '2020-03-29T19:14:12.215Z'\n---\n\n```\n\nKeep in mind that the variable `publishedAt: '2020-03-29T19:14:12.215Z'` must have a value to publish your article.\n\nIf it's set to `published: ''`, your article will only be visible in development.\n\n# Hosting\n\nI personally like the simplicity of [Zeit's Now](https://zeit.co) and that's exactly what I use to host this blog.\nConnect your GitHub repository to a Now project and as soon as you push to master, a new build is executed.\nWithin minutes you'll see your new article online.\n\nIf you want to share your new article with someone to review without having it released, just create a pull request on master and you'll get a preview URL from Now.\n\n# Feedback\n\nIf you have any questions or feedback, please feel free to contact my via [Twitter](https://twitter.com/lailo-ch) of directly add an issue or create a PR on [GitHub](https://github.com/lailo/lailo.ch).\n","type":"article","tags":["open-source","web","react","nextjs","tailwindcss"],"publishedAt":"2020-03-29T19:14:12.215Z","image":"https://fullmetallinux.files.wordpress.com/2012/01/open-source-software.jpg","updatedAt":"2020-03-30T20:52:12.215Z","readingTime":{"text":"2 min read","minutes":1.335,"time":80100,"words":267},"data":{"title":"This Blog Is Open Source","description":"Use this blog to start your own. Be online within minutes by add your data, choose your favorite color and write your first article.","tags":["open-source","web","react","nextjs","tailwindcss"],"publishedAt":"2020-03-29T19:14:12.215Z","image":"https://fullmetallinux.files.wordpress.com/2012/01/open-source-software.jpg","updatedAt":"2020-03-30T20:52:12.215Z","type":"article"}}],"tag":"tailwindcss"},"__N_SSG":true}