` and wrap the contents of your view in it. This is so that it can apply the controller and CSS parent class.
+
+In order to make this work, we now include a `._base {}` class definition in the `component.scss` that's created when you run `rails generate view_component`. Styles that appear within the `._base` block will be applied directly to the generated CSS class for the component. For example, if your component is called `Foo`, and your `._base` class contained a style rule `background: red;`, the compiled CSS that ends up in `application.css` would be:
+
+```
+c-foo {
+ background: red;
+}
+```
+
+What does this look like in practice? Check out the example code below.
+
+## Example Code
+
+A component with this file structure and code:
+
+```
+/Foo/
+ - component.html.slim
+ - component.rb
+ - controller.js
+ - preview.rb
+ - style.scss
+```
+
+`component.html.slim`
+
+```
+.cursor-pointer data-controller="some-controller"
+ .bar Some text
+```
+
+`component.rb`
+
+```
+class Foo::Component < ApplicationComponent
+ enable_wrapper
+
+ def some_method
+ ...
+ end
+end
+```
+
+`style.scss`
+
+```
+._base {
+ @apply flex items-center;
+}
+
+.bar {
+ @apply m-8;
+}
+```
+
+Will yield the following raw HTML:
+
+```
+
+
+
+```
+
+...which, once it's been added to the DOM and `connectedCallback` has been called on the `ts-wrapper`, will become this final HTML:
+
+```
+
+```
+
+...along with the following compiled stylesheet within `application.css`:
+
+```
+.c-foo {
+ display: flex;
+ align-items: center;
+}
+.c-foo .bar {
+ margin: 2rem;
+}
+```