{"id":4213,"date":"2022-04-26T15:10:39","date_gmt":"2022-04-26T15:10:39","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4213"},"modified":"2023-01-21T00:30:08","modified_gmt":"2023-01-21T05:30:08","slug":"how-to-integrate-tailwind-css-into-your-stencil-project","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project","title":{"rendered":"How to Integrate Tailwind CSS into your Stencil Project"},"content":{"rendered":"

Tailwind CSS<\/a> has taken the CSS world by storm, and with good reason. Tailwind is a CSS framework that, at its core, supplies utility classes in an effort to make styling much easier. Tailwind offers a lot of additional features as well and has become especially popular in the world of design systems.<\/p>\n

<\/p>\n

While there isn\u2019t one \u201ccorrect\u201d way to integrate Tailwind into a Stencil project<\/a>, many members of the community have come up with their own solutions that are suited for their individual use cases. In this post, we\u2019d like to highlight some of those community solutions and provide a holistic view of different ways you can use Tailwind with Stencil.<\/p>\n

Using a Stencil Tailwind plugin<\/h2>\n

The first way you can integrate Tailwind into your Stencil project is with the stencil-tailwind-plugin<\/a> created by @Poimen<\/a>. Using this plugin requires very little setup and can get you up and running with Tailwind fairly quickly. In order to use this plugin, we\u2019ll first have to install some dependencies:<\/p>\n

npm i tailwindcss stencil-tailwind-plugin typescript --save-dev\n<\/code><\/pre>\n
Next, we\u2019ll need to configure the plugin in our stencil.config.ts<\/code> file by importing tailwind<\/code> and tailwindHMR<\/code> from stencil-tailwind-plugin<\/code> and adding them to our plugins<\/code> array.<\/p>\n
import { Config } from '@stencil\/core';\nimport tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';\n\nexport const config: Config = {\n  namespace: \u2018my-project\u2019,\n  plugins: [\n    tailwind(),\n    tailwindHMR(),\n  ],\n  \/\/ \u2026\n}\n<\/code><\/pre>\n
\n  NOTE: These plugins accept a lot of different configuration options for additional customization. You can read more about these options in the plugin\u2019s readme<\/code><\/a><\/p><\/blockquote>\n
And those two steps are all we need! With the plugin installed and configured, we can now start using Tailwind utility classes in our Stencil components. Let\u2019s take a look at an example component:<\/p>\n
import { Component, h } from '@stencil\/core';\n\n@Component({\n  tag: 'tailwind-component',\n  shadow: true,\n})\nexport class TailwindComponent {\n  render() {\n    return (\n      <div class="bg-indigo-500 p-6 rounded-md flex justify-center">\n        <h1 class="text-white font-sans">This is a Stencil component using Tailwind<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
And here is the result:<\/p>\n
You may notice that this plugin allows you to use Tailwind with shadow DOM components right out of the box, which would otherwise require some additional work. This setup is just meant to get you started. There\u2019s so much more you can do with this plugin. I encourage you to check out the stencil-tailwind-plugin readme<\/code><\/a> and see everything the plugin has to offer. For a more developed example, checkout @Poimen\u2019s example repo that makes use of the plugin<\/a>.<\/p>\n
Using Global Styles and the Tailwind CLI<\/h2>\n
The Stencil Tailwind plugin is great, but some folks may not want to rely on a third party plugin for their Tailwind integration. If that sounds like you, then you may be more interested in this next solution from @snaptopixel<\/a>. The general idea behind this approach is to point Stencil\u2019s globalStyle<\/code> to Tailwind\u2019s compiled output.<\/p>\n
Before we get started with this implementation, we\u2019ll need to install Tailwind as a dev dependency:<\/p>\n
npm i tailwindcss --save-dev\n<\/code><\/pre>\n
For this solution, we\u2019re going to start in the stencil.config.ts<\/code> file. This solution leverages the www<\/code> output target, so we\u2019ll need to ensure that it’s included in the outputTargets<\/code> array. We\u2019ll also need to specify a global stylesheet for the project by giving globalStyle<\/code> a value of 'www\/tailwind.css'<\/code>. This tailwind.css<\/code> file doesn\u2019t exist yet, but will be generated shortly. All in all, our stencil.config.ts<\/code> file should look something like this:<\/p>\n
export const config: Config = {\n  namespace: 'my-project',\n  globalStyle: 'www\/tailwind.css',\n  outputTargets: [\n    {\n      type: 'www',\n      serviceWorker: null,\n    },\n    \/\/ \u2026\n  ],\n};\n<\/code><\/pre>\n
Now that our Stencil project is configured, let\u2019s set up our Tailwind configuration. We can create a tailwind.config.js<\/code> file by running:<\/p>\n
npx tailwindcss init\n<\/code><\/pre>\n
There are A LOT<\/strong> of things we can do in this file, but for our basic setup we just need to specify the files we want Tailwind to scan via the \u201ccontent\u201d field. In our case, we\u2019ll scan all files ending in \u201cts\u201d, \u201ctsx\u201d and \u201chtml\u201d:<\/p>\n
module.exports = {\n  content: ['.\/src\/**\/*.{ts,tsx,html}'],\n  \/\/ \u2026\n}\n<\/code><\/pre>\n
\n  NOTE: You can learn more about all the ways you can configure Tailwind on the Tailwind configuration docs page<\/a>.<\/p><\/blockquote>\n
The next step in this process is creating a CSS file that contains all of the Tailwind directives. These directives inject Tailwind\u2019s core styles into our project. Under the src<\/code> folder of your Stencil project, create a file called directives.css<\/code> (or any name of your choosing) and add the Tailwind directives like so:<\/p>\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n
Now comes the crux of this solution. We\u2019re going to generate that tailwind.css<\/code> file that we previously defined for our global styles. We do that with the Tailwind CLI:<\/p>\n
npx tailwindcss -i .\/src\/directives.css -o .\/www\/tailwind.css --watch\n<\/code><\/pre>\n
This command scans our project for Tailwind classes and builds a CSS file called tailwind.css<\/code> in the www<\/code> directory. We use the --watch<\/code> flag to watch for any changes and rebuild when changes occur. We can also include the --minify<\/code> flag to minify this file for production<\/a>.<\/p>\n
With our global styles generated, now we need to include a link to that stylesheet in our index.html<\/code> file.<\/p>\n
<link rel="stylesheet" href="build\/stencil-tailwind.css" \/>\n<\/code><\/pre>\n
The name of your stylesheet will be the same as the name of your Stencil project.<\/p>\n
Now, in a separate terminal window, we can start running our Stencil project with npm start<\/code>.<\/p>\n
\n  NOTE: You can bake all of this into one command by using npm-run-all<\/code>. It is beyond the scope of this post, but feel free to check out @snaptopixel\u2019s example repo<\/a> to see how you can set this up.<\/p><\/blockquote>\n
Again, we can create that component from the first solution to see Tailwind in action.<\/p>\n
import { Component, h } from '@stencil\/core';\n\n@Component({\n  tag: 'tailwind-component',\n})\nexport class TailwindComponent {\n  render() {\n    return (\n      <div class="bg-indigo-500 p-6 rounded-md flex justify-center">\n        <h1 class="text-white font-sans">This is a Stencil component using Tailwind<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
You\u2019ll notice one small difference in this version of the component and that is the fact that we are not using the shadow DOM here. In this implementation, the Tailwind styles are coming from an external global stylesheet and thus are not able to pass through the shadow boundary. If using the shadow DOM is crucial for your component, @snaptopixel<\/a> has a clever way to accomplish that.<\/p>\n
In order to add Tailwind styles, while still using the shadow DOM, we can create a utility wrapper component that looks something like this:<\/p>\n
import { getAssetPath, h, Host } from '@stencil\/core'\n\nexport const StyledHost: typeof Host = (attrs, children) => {\n  return (\n    <Host {...attrs}>\n      <link rel='stylesheet' href={getAssetPath('your-tailwind-styles-file.css')} \/>\n      {children}\n    <\/Host>\n  )\n}\n<\/code><\/pre>\n
This component is meant to include a link to the generated Tailwind stylesheet right alongside the component we want to style, so they are both included within the shadow boundary. In practice, we can use this StyledHost<\/code> component like so:<\/p>\n
import { Component, h } from '@stencil\/core'\n\nimport { StyledHost } from '..\/helpers' \/\/ this may vary depending on where your \u2018StyledHost\u2019 component lives\n\n@Component({\n  tag: 'styled-component',\n  shadow: true,\n})\nexport class StyledComponent {\n  render() {\n    return (\n      <StyledHost>\n        <div class="bg-indigo-500 p-6 rounded-md flex justify-center">\n            <h1 class="text-white font-sans">This is a Stencil component using Tailwind<\/h1>\n        <\/div>\n      <\/StyledHost>\n    )\n  }\n}\n<\/code><\/pre>\n
For a full example of how to use this technique, checkout @snaptopixel\u2019s example repo on Github<\/a>.<\/p>\n
Using PostCSS<\/h2>\n
The last integration that we\u2019ll discuss in this article comes from @retinafunk<\/a> and relies on the Stencil PostCSS plugin. To get started, let\u2019s install our dependencies.<\/p>\n
npm install tailwindcss @stencil\/postcss autoprefixer postcss-import --save-dev\n<\/code><\/pre>\n
Next, we\u2019ll want to create our Tailwind config file with npx tailwindcss init<\/code> and specify the content in tailwind.config.js<\/code> like so:<\/p>\n
module.exports = {\n  content: ['.\/src\/**\/*.{ts,tsx,html}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n<\/code><\/pre>\n
With our tailwind.config.js<\/code> file set up, we can now import and add our PostCSS plugins to our stencil.config.ts<\/code> file:<\/p>\n
import { Config } from '@stencil\/core';\nimport {postcss} from '@stencil\/postcss';\nimport autoprefixer from 'autoprefixer';\n\nexport const config: Config = {\n  \/\/ \u2026\n  plugins : [\n    postcss({\n      plugins: [\n        require("postcss-import"),\n        require("tailwindcss")(".\/tailwind.config.js"),\n        autoprefixer()\n      ]\n    })\n  ],\n}\n<\/code><\/pre>\n
At this point now, we can create a Stencil component that uses the Tailwind utility classes. We\u2019ll use the same component we did for the previous examples.<\/p>\n
import { Component, h } from '@stencil\/core';\n\n@Component({\n  tag: 'tailwind-component',\n  styleUrl: 'tailwind-component.css',\n  shadow: true,\n})\nexport class TailwindComponent  {\n  render() {\n    return (\n      <div class="bg-indigo-500 p-6 rounded-md flex justify-center">\n        <h1 class="text-white font-sans">This is a Stencil component using Tailwind<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
You may notice that this component uses the shadow DOM which means we\u2019ll have to include the Tailwind styles within the component. We can do that by adding the Tailwind directives to the tailwind-component.css<\/code> file:<\/p>\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n
And with that we can now run npm start<\/code> and see our Stencil Tailwind component in action.<\/p>\n
This works well, and we could stop here, but one thing you may notice is that we\u2019re including a lot of unused styles in our component. This isn\u2019t a big deal on its own, but as we add more components to our app, each with their own bloated styles, the bundle size can become quite large.<\/p>\n
Fortunately, we can reduce the bundle size quite a bit by using the PurgeCSS<\/a> and CSSNANO<\/a> plugins for PostCSS. Let\u2019s install them as dev dependencies:<\/p>\n
npm i @fullhuman\/postcss-purgecss cssnano --save-dev\n<\/code><\/pre>\n
With these plugins installed, we can now go to our stencil.config.ts<\/code> file and configure our PurgeCSS:<\/p>\n
const purgecss = require("@fullhuman\/postcss-purgecss")({\n  content: [".\/src\/**\/*.tsx", ".\/src\/**\/*.css", ".\/src\/index.html"],\n  defaultExtractor: content => content.match(\/[A-Za-z0-9-_:\/]+\/g) || []\n});\n<\/code><\/pre>\n
The \u201ccontent\u201d field specifies the files we want to analyze and the \u201cdefaultExtractor\u201d field allows us to provide a regular expression that removes additional CSS that might not have otherwise been extracted.<\/p>\n
Finally, we\u2019ll add our purgecss<\/code> and cssnano<\/code> to our PostCSS plugins array in stencil.config.ts<\/code>:<\/p>\n
"plugins" : [\n  postcss({\n    plugins: [\n      require("postcss-import"),\n      require("tailwindcss")(".\/tailwind.config.js"),\n      autoprefixer(),\n      ...(process.env.NODE_ENV === "production"\n          ? [purgecss, require("cssnano")]\n          : [])\n      ]\n  })\n],\n\/\/ \u2026\n<\/code><\/pre>\n
Note that we\u2019re only minifying our CSS for production builds. Now our styles for each component will be much smaller.<\/p>\n
To see all of this come together, checkout the full github repo demonstrating how @retinafunk configures a project<\/a>.<\/p>\n
Conclusion<\/h2>\n
Long as this post may be, it really only scratches the surface of strategies for integrating Stencil and Tailwind. If you\u2019re looking for a way to use Tailwind in your Stencil projects, feel free to give all three of these strategies a try and see what works best for your use case. Don\u2019t be afraid to combine some of these techniques and add on top of them to create a solution that works best for you.<\/p>\n
Again, a huge thanks goes out to @Poimen, @snaptopixel, and @retinafunk for not only creating these solutions, but also for sharing them with the community. All three of these solutions came from discussions in the Stencil Slack community<\/a>. If you\u2019re interested in being a part of these conversations and many others around Stencil, please come join us on Slack. The community is full of brilliant Stencil developers eager to help and learn together.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tailwind CSS has taken the CSS world by storm, and with good reason. Tailwind is a CSS framework that, at its core, supplies utility classes in an effort to make styling much easier. Tailwind offers a lot of additional features as well and has become especially popular in the world of design systems.<\/p>\n","protected":false},"author":87,"featured_media":4214,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"546023","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/how-to-integrate-tailwind-css-into-your-stencil-project\/222709","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,223,124],"tags":[140,76,82],"class_list":["post-4213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-stencil","category-tutorials","tag-design-systems","tag-stencil","tag-web-components"],"acf":[],"yoast_head":"\nHow to Integrate Tailwind CSS into your Stencil Project - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate Tailwind CSS into your Stencil Project\" \/>\n<meta property=\"og:description\" content=\"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-26T15:10:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:30:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anthony Giuliano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@a__giuliano\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Giuliano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"How to Integrate Tailwind CSS into your Stencil Project\",\"datePublished\":\"2022-04-26T15:10:39+00:00\",\"dateModified\":\"2023-01-21T05:30:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\"},\"wordCount\":1428,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png\",\"keywords\":[\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"All\",\"Stencil\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\",\"url\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\",\"name\":\"How to Integrate Tailwind CSS into your Stencil Project - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png\",\"datePublished\":\"2022-04-26T15:10:39+00:00\",\"dateModified\":\"2023-01-21T05:30:08+00:00\",\"description\":\"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"Stencil + Tailwind\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate Tailwind CSS into your Stencil Project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\",\"name\":\"Anthony Giuliano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"caption\":\"Anthony Giuliano\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/\",\"https:\/\/x.com\/a__giuliano\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/anthonyionic-io\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Integrate Tailwind CSS into your Stencil Project - Ionic Blog","description":"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project","og_locale":"en_US","og_type":"article","og_title":"How to Integrate Tailwind CSS into your Stencil Project","og_description":"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.","og_url":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project","og_site_name":"Ionic Blog","article_published_time":"2022-04-26T15:10:39+00:00","article_modified_time":"2023-01-21T05:30:08+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","type":"image\/png"}],"author":"Anthony Giuliano","twitter_card":"summary_large_image","twitter_creator":"@a__giuliano","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Anthony Giuliano","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"How to Integrate Tailwind CSS into your Stencil Project","datePublished":"2022-04-26T15:10:39+00:00","dateModified":"2023-01-21T05:30:08+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project"},"wordCount":1428,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","keywords":["Design Systems","stencil","web components"],"articleSection":["All","Stencil","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project","url":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project","name":"How to Integrate Tailwind CSS into your Stencil Project - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","datePublished":"2022-04-26T15:10:39+00:00","dateModified":"2023-01-21T05:30:08+00:00","description":"Many members of the Stencil community have come up with their own strategies to integrate Tailwind CSS with Stencil.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","width":1600,"height":880,"caption":"Stencil + Tailwind"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/how-to-integrate-tailwind-css-into-your-stencil-project#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How to Integrate Tailwind CSS into your Stencil Project"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58","name":"Anthony Giuliano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","caption":"Anthony Giuliano"},"sameAs":["https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/","https:\/\/x.com\/a__giuliano"],"url":"https:\/\/ionic.io\/blog\/author\/anthonyionic-io"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/04\/stenciltailwind-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4213"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4213\/revisions"}],"predecessor-version":[{"id":4701,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4213\/revisions\/4701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4214"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}