# styled

Published articles for styled.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Using Tailwind CSS with Gatsby, React & Emotion Styled Components

DevFeed: [Using Tailwind CSS with Gatsby, React & Emotion Styled Components](<https://devfeed.tech/articles/using-tailwind-css-with-gatsby-react-emotion-styled-components-31316.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/using-tailwind-css-with-gatsby-react-emotion-styled-components>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2019-10-20T14:08:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [gatsby](<https://devfeed.tech/topics/gatsby.md>), [React](<https://devfeed.tech/topics/react.md>), [styled-components](<https://devfeed.tech/topics/styled-components.md>), [CSS](<https://devfeed.tech/topics/css.md>), [PostCSS](<https://devfeed.tech/topics/postcss.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [css-in-js](<https://devfeed.tech/tags/css-in-js.md>), [emotion](<https://devfeed.tech/tags/emotion.md>), [gatsby](<https://devfeed.tech/tags/gatsby.md>), [insights](<https://devfeed.tech/tags/insights.md>), [learn](<https://devfeed.tech/tags/learn.md>), [postcss](<https://devfeed.tech/tags/postcss.md>), [project](<https://devfeed.tech/tags/project.md>), [react](<https://devfeed.tech/tags/react.md>), [styled](<https://devfeed.tech/tags/styled.md>), [styled-components](<https://devfeed.tech/tags/styled-components.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [tailwind-css](<https://devfeed.tech/tags/tailwind-css.md>), [utility-first](<https://devfeed.tech/tags/utility-first.md>)

### AI overview

A tutorial on combining Tailwind CSS with Gatsby and React through Emotion Styled Components. It explains a hybrid setup using twin.macro for component-level Tailwind styles and PostCSS for Tailwind's base and global styles.

### Source excerpt

Learn how to use the utility-first Tailwind CSS with Emotion "CSS-in-JS" Styled Components in a Gatsby JS + React project.